CSS隐藏元素：display:none vs visibility:hidden
display: none 和 visibility: hidden 都是 CSS 中用于隐藏元素的属性，但它们在页面布局、渲染机制和交互行为上有本质区别：
核心区别总结：
| 特性 | display: none | visibility: hidden |
|---|---|---|
| 是否占据布局空间 | ❌ 完全从文档流移除，不占空间 | ✔️ 保留原有空间，布局留空白 |
| 子元素是否可见 | ❌ 所有后代元素均不可见 | ✔️ 子元素可通过 visibility: visible 单独显示 |
| 是否触发重排 | ✔️ 改变布局，触发重排（性能影响大） | ❌ 不改变布局，只触发重绘（性能影响小） |
| 是否响应事件 | ❌ 无法响应点击等事件 | ❌ 自身不响应事件（但可见子元素可响应） |
| 是否可添加过渡动画 | ❌ 不支持 | ✔️ 可与 opacity 配合实现淡入淡出动画 |
详细解释：
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= “隐身”但占位（视觉隐藏）