关于 CSS 里的元素显隐

总结

特性	display: none	visibility: hidden	opacity: 0
占据空间	否 (从文档流移除)	是 (保留空间)	是 (保留空间)
响应事件	否	否	是 (但不可见)
子元素继承/覆盖	子元素也隐藏，不可覆盖	子元素也隐藏，但可设置 visible 覆盖	子元素也透明，不可设置不透明覆盖
CSS 过渡/动画	否 (突变)	是	是 (非常适合)
可访问性 (读屏器)	通常不可访问	通常不可访问	可访问
性能影响	可能触发重排 (reflow) + 重绘 (repaint)	通常只触发重绘 (repaint)	通常只触发重绘 (repaint)，易于 GPU 加速

说明

1. visibility: hidden

   • 视觉效果：元素不可见。
   • 占据空间：元素仍然占据其在文档流中的空间。页面布局不会改变，只是元素看不见了。
   • 响应事件：元素不响应任何用户交互事件（如点击、悬停等）。
   • 子元素继承：子元素会继承 visibility: hidden。但是，如果给子元素显式设置 visibility: visible，那么这个子元素是可以被看见的，即使父元素是 hidden 的。
   • CSS 过渡/动画：支持。你可以从 visibility: visible 过渡到 visibility: hidden。
   • 性能：通常只触发重绘（repaint），不触发重排（reflow/relayout），性能相对较好。
   • 可访问性 (读屏器)：内容通常对读屏器不可访问。

2. display: none

   • 视觉效果：元素不可见。
   • 占据空间：元素不占据任何空间，就像它从文档流中完全移除了。会导致页面布局的重排。
   • 响应事件：元素不响应任何用户交互事件。
   • 子元素继承：子元素会随着父元素一起从文档流中移除，并且无法通过设置 display 属性使其重新可见（除非父元素也变为 display: block 或其他可见值）。
   • CSS 过渡/动画：不支持。display 属性的改变是瞬时的，不能平滑过渡。
   • 性能：会触发重排（reflow/relayout）和重绘（repaint），可能对性能影响较大，尤其是在复杂页面或频繁切换时。
   • 可访问性 (读屏器)：内容对读屏器完全不可访问。

3. opacity: 0

   • 视觉效果：元素完全透明，因此不可见。
   • 占据空间：元素仍然占据其在文档流中的空间。页面布局不会改变。
   • 响应事件：元素仍然响应用户交互事件（如点击、悬停等），尽管它是看不见的。这可能导致意外的行为，比如用户点击了一个看不见的按钮。
   • 子元素继承：子元素会继承父元素的透明度。如果父元素 opacity: 0，子元素即使设置 opacity: 1 也是完全透明的（因为透明度是相乘的，0 * 1 = 0）。
   • CSS 过渡/动画：非常适合。opacity 是最常用于实现平滑淡入淡出效果的属性。
   • 性能：通常只触发重绘（repaint），并且很多现代浏览器会对 opacity 动画进行 GPU 加速，性能非常好。
   • 可访问性 (读屏器)：内容仍然对读屏器可访问。

什么时候用什么？

1. display: none

   • 当你希望元素彻底从页面布局中消失，不占用任何空间时。
   • 例如：
     • 响应式设计中，在小屏幕上隐藏某些桌面版元素。
     • 选项卡切换内容。
     • 模态框（Modal）或下拉菜单在关闭状态时。
     • 动态添加或移除内容，不希望为隐藏内容保留位置。

2. visibility: hidden

   • 当你希望元素不可见，但仍然占据其原始空间，不影响页面布局时。
   • 当你可能需要让其子元素可见时（通过 visibility: visible）。
   • 当你需要用 CSS 过渡来控制元素的显隐，并且不希望元素消失时布局发生变化。
   • 例如：
     • 游戏中的某些隐藏障碍物，碰撞检测依然有效（虽然事件不响应，但其几何信息还在）。
     • 暂时隐藏某个元素，稍后通过动画或用户操作使其重新出现，且不希望周围元素移动。

3. opacity: 0

   • 当你主要想实现视觉上的淡入淡出效果，或者希望元素虽然不可见但仍能响应事件或被辅助技术访问时。
   • 通常用于平滑的动画过渡。
   • 重要： 如果你使用 opacity: 0 来隐藏元素，并且不希望它响应事件（这是大多数情况），你应该同时添加 pointer-events: none;。
   • 例如：
     • 图片加载时的占位符逐渐消失，图片逐渐显现。
     • Tooltip 或提示框的淡入淡出效果。
     • 元素需要保持布局位置，且需要平滑的显隐动画。

经验法则：

• 需要动画且不影响布局： 优先考虑 opacity: 0 (配合 pointer-events: none 如果不需要交互)。
• 需要元素彻底消失，不占空间： 使用 display: none。
• 需要元素不可见但保留空间，且可能子元素需要独立显隐： 使用 visibility: hidden。