CSS 中 display:none 和 visibility:hidden 的区别是什么？

display: none 和 visibility: hidden 都可以隐藏元素，但它们在文档布局、渲染行为和继承等方面存在关键差异：

1. 空间占用与文档流影响：
   • display: none：元素被完全移除文档流，不占据任何空间，如同不存在一样。页面的布局重新调整以适应移除的元素。示例：切换 display: none 时，相邻元素会自动填补空白，导致布局回流（reflow）。
   • visibility: hidden：元素视觉上隐藏但保持占用原位置，不影响整体布局。示例：切换该值，页面位置保留，内容不重新计算。
2. 浏览器渲染与性能：
   • display: none：切换时会触发全局回流（reflow），浏览器必须重构渲染树，性能开销较大。
   • visibility: hidden：仅导致重绘（repaint），元素位置不变，性能更轻量。
3. 子元素继承：
   • display: none：该属性不可继承；父元素的 display: none 会强制隐藏所有子元素，子元素不能覆盖。
   • visibility: hidden：属性可继承，但子元素可通过设置 visibility: visible 单独显示：

     .parent {
     visibility: hidden; /* 子默认隐藏 */
     }
     .child {
     visibility: visible; /* 此子元素可见 */
     }
     

4. 支持动画与交互：
   • display: none：元素被移除树状结构，无法应用任何动画效果。
   • visibility: hidden：可与 opacity: 0 结合创建淡入淡出动画：

     .hidden-element {
     visibility: hidden;
     opacity: 0;
     transition: all 0.3s ease;
     }
     .hidden-element.active {
     visibility: visible;
     opacity: 1;
     }
     

5. 实际应用场景：
   • display: none 适用于临时移除元素（如折叠菜单），布局变化显著场合。
   • visibility: hidden 更适合保留空间结构（如隐藏后恢复内容）或实现平滑过渡动画。

注意：两者都不可用于键盘或屏幕阅读器访问，若需完全隐藏但对辅助工具可用，可使用 .sr-only 类或其他隐藏方法结合 aria-hidden=true。