在网页开发中，我们常常需要隐藏某些元素。虽然 display: none 和 visibility: hidden 都可以让元素“不可见”，但它们在渲染机制、布局影响、继承性以及无障碍访问等方面存在显著差异。
本文将深入对比 display: none 与 visibility: hidden 的区别，帮助你根据具体需求选择更合适的隐藏方式。
📌 一、基本概念对比
| 属性 | display: none | visibility: hidden |
|---|---|---|
| 是否可见 | ❌ 不可见 | ❌ 不可见 |
| 是否占据空间 | ❌ 不占据空间 | ✅ 仍占据空间 |
| 是否从渲染树移除 | ✅ 是 | ❌ 否 |
| 是否可继承 | ❌ 否（非继承属性） | ✅ 是（子元素也会隐藏） |
| 对文档流的影响 | ✅ 会引发重排（reflow） | ❌ 只引发重绘（repaint） |
| 屏幕阅读器是否读取 | ❌ 不会被读取 | ✅ 会被读取 |
🧩 二、逐项解析
1. display: none
✅ 特点：
- 元素完全从文档流和渲染树中移除；
- 不占据任何空间；
- 所有子元素也被强制隐藏，且无法通过设置子元素的
display来恢复显示； - 页面布局会重新计算，可能触发重排（reflow）；
- 不会被屏幕阅读器读取；
📌 示例：
<div style="display: none;">
<p>这段文字完全不会显示</p>
</div>
该 div 及其内容都不会出现在页面上，也不会占用任何空间。
⚙️ 适用场景：
- 完全隐藏模块（如弹窗关闭、切换标签页）；
- 动态加载内容前的占位隐藏；
- 移动端/PC端适配时的结构隐藏；
2. visibility: hidden
✅ 特点：
- 元素仍然存在于文档流中，占据原来的空间；
- 子元素默认继承父级的
visibility: hidden； - 子元素可以通过设置
visibility: visible单独显示出来； - 只引起重绘（repaint），不影响布局；
- 会被屏幕阅读器读取，适合用于辅助功能设计；
📌 示例：
<div style="visibility: hidden; width: 200px; height: 100px; background: red;">
<span style="visibility: visible;">我是可见的文字</span>
</div>
外层 div 被隐藏了，但内部 span 设置为 visible，因此它仍然可见。
⚙️ 适用场景：
- 需要保留元素位置，避免页面跳动；
- 表格单元格的临时隐藏；
- 实现“视觉隐藏但语义保留”的无障碍设计；
🧠 三、关键区别总结
| 区别维度 | display: none | visibility: hidden |
|---|---|---|
| 是否占据空间 | ❌ 不占据 | ✅ 占据 |
| 是否从渲染树移除 | ✅ 是 | ❌ 否 |
| 是否继承 | ❌ 否 | ✅ 是 |
| 子元素能否显示 | ❌ 不能 | ✅ 可以通过设置 visible 显示 |
| 触发重排 | ✅ 会触发 | ❌ 不触发，仅重绘 |
| 是否影响布局 | ✅ 影响 | ❌ 不影响 |
| 屏幕阅读器支持 | ❌ 不读取 | ✅ 读取 |
💡 四、如何选择？
| 场景描述 | 推荐使用 |
|---|---|
| 完全隐藏元素，不参与布局 | ✅ display: none |
| 隐藏元素但仍保留其原有空间 | ✅ visibility: hidden |
| 需要子元素单独显示 | ✅ visibility: hidden |
| 避免页面布局抖动 | ✅ visibility: hidden |
| 隐藏但需被屏幕阅读器识别 | ✅ visibility: hidden |
| 动态切换显示状态（如 Tab 切换） | ✅ 根据需求灵活选择 |
📌 五、性能与可访问性建议
-
性能优化：
- 如果频繁切换显示状态，推荐使用
visibility: hidden，因为它不会导致重排； - 若需要彻底移除元素并释放资源，使用
display: none；
- 如果频繁切换显示状态，推荐使用
-
无障碍设计：
- 使用
visibility: hidden可实现“视觉隐藏但语义保留”，对屏幕阅读器友好； display: none会完全屏蔽元素，不适合用于辅助信息展示；
- 使用
