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
