17370845950

display: none 彻底移出文档流，不占空间、不可交互；visibility: hidden 仅视觉隐藏，保留位置、可被子元素覆盖显示。

想让元素隐藏但又不占空间，用 display: none；如果只是“看不见”，但还想留着它原来的位置和布局空间，就用 visibility: hidden。两者核心区别不在“藏不藏”，而在“占不占位”。

display: none —— 彻底移出文档流

元素不仅不可见，还会从渲染树中被完全移除，不占据任何空间，也不影响其他元素的布局。

• 父元素高度会塌缩（比如空 div 不再撑高）
• 后续兄弟元素会上移填补空缺
• 无法触发 hover、focus 等交互事件（因为已不存在于渲染树）
• 屏幕阅读器通常会跳过该元素

visibility: hidden —— 隐藏但保留位置

元素视觉上消失，但仍在文档流中，占据原有尺寸和位置，周围元素布局不受影响。

• 父容器仍按它原来的宽高计算布局
• 鼠标悬停或点击该区域，不会触发事件（但可通过 visibility: visible 恢复）
• 子元素若设为 visibility: visible，可重新显示（这是 display 不具备的特性）
• 屏幕阅读器可能仍会读取内容（取决于具体实现）

其他“看似隐藏”的方式对比

有些写法容易混淆，实际效果不同：

• opacity: 0：透明但可交互、占位、能触发事件
• position: absolute; left: -9999px：移出视口，但仍在文档流（除非配合 clip 或 transform）
• width: 0; height: 0; overflow: hidden：强制收缩，适合隐藏内容但保留结构

怎么选？看你的需求

需要彻底“消失且不干扰布局” → 用 display: none
需要“暂时隐藏但保持页面稳定”（如切换菜单、动画过渡）→ 用 visibility: hidden
需要隐藏同时保留可访问性或支持子元素显隐控制 → 优先考虑 visibility