应使用 visibility: hidden 而非 display: none，因其隐藏元素但保留布局位置，避免重排、维持 API 可访问性、支持继承与显式覆盖，且不影响 SEO 和屏幕阅读器；需配合 pointer-events: none 禁用交互，结合 opacity 实现过渡效果。
直接用 visibility: hidden 就行，它专为“藏人不挪位”而生。
为什么不能用 display: none？
因为 display: none 会把元素从渲染树里彻底踢出去——盒模型不计算、尺寸不占位、后续元素立刻上移，页面会“抖一下”。这在轮播图预加载、表单错误提示、骨架屏占位等场景中极易引发布局跳动或交互错位。而 visibility: hidden 只是让元素“闭眼站原地”，布局流完全不受影响，只触发重绘（repaint），不触发重排（reflow）。
-
display: none下，el.offsetParent返回null，el.getClientRects()返回空集合 -
visibility: hidden下，上述 API 仍返回有效值，方便 JS 做尺寸判断或动画准备 - SEO 和屏幕阅读器默认仍能访问
visibility: hidden元素（如需屏蔽，得加aria-hidden="true"）
visibility: hidden 的继承行为常被误读
父元素设了 visibility: hidden，子元素默认也看不见——这不是 bug，是规范定义的继承行为。但你可以显式覆盖：
- 子元素写
visibility: visible就能单独显示（哪怕父级是hidden） - 别写
visibility: false或visibility: off，浏览器直接忽略，退回到visible -
visibility: collapse在非表格元素上等同hidden，兼容性差，不建议用
怎么配合事件和动画一起用？
visibility 本身不支持 transition（它是离散值），但可以和 opacity 或 transform 组合实现视觉过渡：
立即学习“前端免费学习笔记（深入）”；
- 想隐藏时禁用点击？必须加
pointer-events: none，否则visibility: hidden的元素仍可响应focus或键盘操作 - 要渐隐效果？用
opacity: 0+transition: opacity 0.25s更合适；visibility适合开关式硬切 - 注意堆叠上下文：
opacity: 0.99会创建新层叠上下文，影响z-index行为；visibility: hidden不会
真正容易被忽略的是：当父容器用了 contain: layout style 或 will-change: visibility 时，visibility 切换性能更稳；但若隐藏的是巨型列表，光靠 visibility 不够，得结合虚拟滚动或 DOM 卸载策略。
