必须用 display: none 才能让元素彻底消失、不占位、不影响布局；visibility: hidden 仅透明化但保留盒模型参与布局，opacity: 0 仍可交互且性能开销最大。
想让元素彻底消失、不占位、不影响布局，必须用 display: none；如果它还占空间，说明你误用了 visibility: hidden 或其他“假隐藏”方式。
为什么 visibility: hidden 会占位置
它只是把元素“画成透明”，但浏览器仍照常计算它的盒模型：宽高、margin、padding 全部参与布局，父容器高度照算，兄弟元素也不会挪位。这不是 bug，是设计如此。
常见错误现象：
- 切换菜单时用
visibility: hidden隐藏子项，结果点击区域还在、背景色还盖着下面内容 - 表单里隐藏某个
<input>，但 label 位置没变，导致对齐错乱 - 动画中用
visibility: hidden做“淡出终点”，结果过渡卡顿——因为 visibility 不支持transition
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 纯视觉隐藏 + 需要保留布局稳定性（如加载占位符）→ 用
visibility: hidden - 需要子元素破除隐藏（比如只隐藏父容器但让图标显示）→ 必须显式给子元素加
visibility: visible - 别指望它响应
:hover或focus，它已失去交互能力
为什么 display: none 才真正“不占位”
它从渲染树中直接删掉节点，不参与任何布局计算：父容器高度塌缩、兄弟元素立即上移、事件监听器自动失效、屏幕阅读器跳过。
容易踩的坑：
- 用
display: none隐藏浮动元素后，父容器高度塌陷 → 不是 display 的问题，是父容器没触发 BFC，得加overflow: hidden或display: flow-root - 在 CSS 动画中切
display值 → 浏览器强制重排，性能差，且无法过渡，应改用opacity+pointer-events: none - 用 JS 切换
display时写成el.style.display = ''→ 这不会恢复原值，要用getComputedStyle记录或存 data 属性
参数差异：
-
display值多（block、flex、grid等），切换时可能意外改变盒类型 -
visibility只有visible/hidden/collapse（表格专用），更安全但功能受限
opacity: 0 和 visibility: hidden 混用的陷阱
两者都“看不见”，但行为完全不同：opacity: 0 仍可点、可 hover、会触发动画重绘；visibility: hidden 默认禁交互、不触发 transition 起点。
使用场景：
- 要做渐隐渐显动画 → 必须用
opacity，并加pointer-events: none防误点 - 要隐藏但保持 tab 键可访问性 →
visibility: hidden在部分读屏器中仍被读取，display: none则完全跳过 - 伪元素阴影导致虚假占位 → 不是隐藏问题，是
box-shadow溢出，得用clip-path: inset(0)或让伪元素自身建层叠上下文
性能影响：
-
display: none开销最小（跳过布局、绘制） -
visibility: hidden中等（仍布局、跳过绘制像素） -
opacity: 0最高（全链路走完，只是最终 alpha 为 0）
最易被忽略的一点：当父容器本身是浮动或 flex/grid 容器时，visibility: hidden 的子元素仍会影响 align-items 或 justify-content 的计算——它没消失，只是“不可见”。这时候若想让它彻底退出布局参与，唯一可靠解法仍是 display: none。
