面试题：display:none 与 visibility:hidden 的区别

display: none 和 visibility: hidden 都可以隐藏 HTML 元素，但它们在行为、对布局的影响以及性能上有着本质的区别。理解这些差异对于精确控制页面显示和布局至关重要。

---

一、核心区别对比

特性	display: none	visibility: hidden
是否占据空间	❌ 不占据（从文档流中移除）	✅ 仍然占据空间
是否触发重排（Reflow）	✅ 是（布局改变）	❌ 否（仅重绘）
子元素是否继承	子元素也被隐藏，且无法通过 visibility: visible 覆盖	子元素可被设置为 visible 来显示
对屏幕阅读器的影响	通常被忽略（不可访问）	仍可被读取（可访问）
过渡（transition）支持	❌ 不支持（无法从 none 过渡到 block）	✅ 支持（可在 visible 和 hidden 间过渡）

---

二、详细解释

1. display: none

• 完全移除元素：
  • 元素及其所有子元素从正常的文档流中完全移除。
  • 浏览器在渲染时就像这个元素不存在一样。
• 不占据任何空间：
  • 元素原来占据的空间会被“回收”，后续元素会上移填补空缺。
• 触发重排（Reflow）：
  • 由于布局发生变化，浏览器需要重新计算其他元素的位置和大小，这是一个相对昂贵的操作。
• 不可访问：
  • 屏幕阅读器等辅助技术通常会跳过 display: none 的元素，认为它是不可见且不重要的。
• 示例：

.hidden {
    display: none;
  }

2. visibility: hidden

• 仅隐藏视觉呈现：
  • 元素在视觉上不可见，但仍然存在于文档流中。
  • 元素的盒模型（包括 margin、padding、border）依然占据着原来的空间。
• 占据原有空间：
  • 周围元素的布局不会改变，就像元素“透明”了一样。
• 不触发重排，只触发重绘（Repaint）：
  • 因为几何属性未变，浏览器只需重新绘制该区域（通常是空白），性能开销较小。
• 可被子元素覆盖：
  • visibility 是可继承的属性，但子元素可以通过设置 visibility: visible 来强制显示自己。
• 可访问：
  • 屏幕阅读器仍可能读取 visibility: hidden 的内容，因为它在 DOM 中是“存在”的。
• 支持 CSS 过渡：
  • 可以使用 transition 实现淡入淡出等动画效果。
• 示例：

.invisible {
    visibility: hidden;
  }

  /* 子元素可以显示 */
  .invisible .child {
    visibility: visible;
  }

---

三、使用场景

✅ 使用 display: none 的场景：

• 彻底隐藏不需要的模块：如隐藏导航菜单、模态框、选项卡内容。
• 条件性展示：根据用户操作或状态动态显示/隐藏大块内容。
• SEO 或性能考虑：确保某些内容在特定条件下完全不加载或不被索引（配合 JS 动态加载）。

✅ 使用 visibility: hidden 的场景：

• 临时隐藏但仍需保留空间：如制作下拉菜单的“占位”效果。
• 需要动画过渡：实现元素的淡入淡出（配合 opacity 更佳）。
• 子元素控制显示：例如，隐藏父容器但显示其中的某个提示图标。
• 性能敏感的频繁切换：由于不触发重排，适合高频切换的场景（但通常 opacity: 0 更优）。

---

四、常见误区

• opacity: 0 vs visibility: hidden：
  • opacity: 0 也隐藏元素且保留空间，但它仍然可以响应鼠标事件（如点击、hover），而 visibility: hidden 的元素不会触发这些事件。
  • opacity 支持更平滑的透明度过渡。
• 继承性：
  • visibility 是可继承的，display 不是。

---

总结

选择依据	推荐方案
是否要保留布局空间？	否 → display: none，是 → visibility: hidden
是否需要动画？	是 → visibility: hidden 或 opacity: 0
是否要完全移除元素？	是 → display: none
是否关心可访问性？	是 → visibility: hidden（内容仍可读）

简单来说：

• display: none：“消失”了，空间也没了。
• visibility: hidden：“隐身”了，但空间还在。

根据具体需求选择合适的隐藏方式，是前端开发中的基本功。