CSS隐藏元素：display:none vs visibility:hidden

display: none 和 visibility: hidden 都是 CSS 中用于隐藏元素的属性，但它们在页面布局、渲染机制和交互行为上有本质区别：

核心区别总结：

详细解释：

1. 对布局空间的影响

• display: none：
  元素完全从渲染树中移除，不占据任何页面空间，后续元素会占据其位置（布局重新计算）。

  <div style="display: none;">隐藏元素</div>
  <div>后续元素会顶上去</div> <!-- 紧贴前一个元素 -->
  

• visibility: hidden：
  元素视觉上不可见，但仍占据原有空间，布局中会保留空白区域。

  <div style="visibility: hidden;">隐藏元素</div>
  <div>后续元素位置不变</div> <!-- 中间有空白区域 -->
  

2. 子元素的继承性

• display: none：
  所有子元素无论设置如何均不可见（父元素已不在渲染树中）。
• visibility: hidden：
  子元素默认继承隐藏属性，但可通过覆盖设置单独显示：

  .parent {
    visibility: hidden; /* 父元素隐藏 */
  }
  .child {
    visibility: visible; /* 子元素强制显示 */
  }
  

3. 渲染性能

• display: none：
  切换时会触发重排（Reflow）与重绘（Repaint），性能开销较大。
• visibility: hidden：
  仅触发重绘（Repaint）（元素仍在渲染树中，只修改可见性），性能更优。

4. 事件交互

• 两者均无法响应自身事件（如点击、悬停）。
• 特殊点：visibility: hidden 的元素中，若有子元素设为 visibility: visible，则该子元素仍可响应事件。

5. 动画支持

• display: none：
  无法直接应用 CSS 过渡动画（切换时立即生效）。
• visibility: hidden：
  可与 opacity 组合实现平滑的淡入淡出效果：

  .element {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s, visibility 0.5s;
  }
  .element.show {
    visibility: visible;
    opacity: 1;
  }
  

使用场景建议：

• 用 display: none 当：
  需要完全移除元素且不占空间（如动态切换选项卡、折叠菜单）。
• 用 visibility: hidden 当：
  保留布局空间（如占位避免页面抖动），或实现隐藏/显示动画。

💡 关键记忆点：

• display: none = 彻底消失（物理移除）
• visibility: hidden = “隐身”但占位（视觉隐藏）