visibility: hidden 是最直接、最可靠的方式：元素不可见但保留原有布局空间，不触发重排；而 display: none 会彻底移除元素、引发重排、破坏占位与对齐，故不适用于需维持布局稳定的场景。
visibility: hidden 是最直接、最可靠的方式：元素不可见，但保留原有布局空间，不触发重排。
为什么不用 display: none？
它会把元素从文档流中彻底移除，周围元素立刻“补位”，占位效果完全消失。如果你需要留空、对齐、维持表单结构或避免布局跳动，display: none 就不合适。
visibility: hidden 的实际行为要点
它不是“视觉透明”，而是“渲染隐藏”——浏览器仍计算盒模型、保留 margin/padding、维持 DOM 位置：
- 子元素默认也被隐藏，但可被显式设为
visibility: visible覆盖（这点和display: none不同） - 元素无法响应点击/悬停，但焦点仍可通过
tabindex进入（对可访问性有影响） - 动画中常配合
opacity使用，因为visibility本身不可过渡，需搭配opacity实现淡出效果 - 屏幕阅读器通常仍会读取内容（除非同时加
aria-hidden="true"）
常见误用场景与替代方案
以下情况别硬套 visibility: hidden：
- 想隐藏但保留交互（比如按钮要响应点击）→ 改用
opacity: 0; pointer-events: none; - 需要 SEO 隐藏文字但供读屏器读取 → 用
position: absolute; left: -9999px; - 要折叠内容并带高度动画 → 用
max-height: 0; overflow: hidden;+ transition - HTML5 原生语义化隐藏 → 直接加
hidden属性，但注意它等价于display: none，不占位
真正需要“隐藏但占位”时，visibility: hidden 几乎是唯一兼顾语义、性能和布局稳定性的选择；但它的不可过渡性、可访问性表现和子元素覆盖逻辑，是容易被忽略的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
