一：引言

visibility: hidden 和 display: none 在 CSS 中均用于隐藏元素，那么，他们又什么区别呢？

二：区别

（1）布局上

display: none=>元素完全从文档流中移除，不占据任何空间，后续元素会重新排列

visibility: hidden‌=>元素不可见但仍占据原有空间，布局保持不变

（2）子元素继承性上

display: none=>所有子元素无论自身如何设置都会被隐藏‌

visibility: hidden‌=>元素默认继承父级的 visibility: hidden，但若某个子元素显式设置为 visibility: visible，则该子元素会‌可见‌

（3）事件交互上

display: none=>元素‌无法触发或响应任何事件‌（如点击、悬停）

visibility: hidden‌=>元素默认‌不触发事件‌，但若子元素设置为 visibility: visible，则这些子元素仍可触发事件

（4）动画过渡上

display: none=>无法直接应用过渡效果

visibility: hidden‌=>可与 opacity 等属性配合实现平滑过渡效果

（5）性能与渲染上

display: none=>浏览器可能跳过渲染该元素，提升性能

visibility: hidden‌=>元素仍参与布局计算，可能对性能有轻微影响

（6）可访问性上

两者通常都会被屏幕阅读器忽略，但可通过 aria-hidden="true" 显式控制

三：代码

<div style="display: none;">隐藏元素</div>
<div>后续元素</div>
<!-- 显示效果：后续元素紧接在前一个可见元素之后 -->

<div style="visibility: hidden;">隐藏元素</div>
<div>后续元素</div>
<!-- 显示效果：隐藏元素的位置留白，后续元素位置不变 -->

四：总结

1：需要彻底移除元素时（如动态切换内容），使用 display: none。

2：需保留布局或实现过渡动画时，使用 visibility: hidden