visibility: hidden 是保留空间的正确选择，它仅隐藏元素但维持盒模型计算，不触发重排，支持子元素穿透显示、屏幕阅读器读取及 canvas 上下文保持；display: none 则彻底移除元素、触发重排且不支持过渡。
visibility: hidden 是保留空间的正确选择
想隐藏元素但不让周围布局跳动，必须用 visibility: hidden，而不是 display: none。因为前者只是“盖住”，盒模型照常计算；后者直接从渲染树中剔除，父容器高度塌缩、兄弟元素上移，布局立刻重排。
常见错误现象包括：表单校验提示突然消失导致按钮上移、轮播图切换时图片容器尺寸抖动、Canvas 重绘后空白——这些基本都是误用了 display: none 导致的。
-
visibility: hidden下，getBoundingClientRect()仍返回有效宽高，offsetParent不为null - 子元素设
visibility: visible可以穿透显示（display: none完全不支持） - 屏幕阅读器默认仍读取内容，如需屏蔽得额外加
aria-hidden="true"
display: none 的适用边界很明确
它不是“更狠的隐藏”，而是“彻底退出布局”。只有当你需要元素不占位、不参与任何渲染流程、且后续元素必须填补空缺时，才该用 display: none。
典型误用是：在悬停菜单里对子项用 display: none 控制显隐，结果鼠标移过去触发不了 :hover，因为元素已不在渲染树中。
- 表单中
<input name="email">加了display: none，依然会随表单提交（要禁用或删name） -
transition: display 0.3s完全无效，浏览器不支持离散属性过渡 - React/Vue 中用
v-if或条件渲染，本质比 CSS 隐藏更彻底——DOM 节点都不挂载
JavaScript 检测可见性时别被假象骗了
用 JS 判断是否“视觉隐藏”不能只看 offsetHeight === 0，因为 display: none 和 visibility: hidden 都会让它返回 0，但语义完全不同。
真正可靠的判断方式是：
- 查计算样式：
getComputedStyle(el).visibility === 'hidden' - 查渲染状态：
el.offsetParent !== null表示仍在文档流中（display: none时为null） - 避免在
display: none状态下调用el.focus()，虽然不报错，但焦点不可见且可能被辅助技术忽略
动画和无障碍场景下的取舍要点
需要渐隐效果时，visibility 本身不支持 transition，但可以组合使用：opacity 做过渡 + visibility 控制最终状态，避免点击穿透。
打印样式表中，visibility: hidden 不影响输出，而 display: none 才真正不打印——这点常被忽略。
- 做 skip-link 时，不能只靠
display: none，得用position: absolute; left: -9999px配合overflow: hidden - Canvas 或 WebGL 容器临时隐藏，优先选
visibility: hidden，避免上下文丢失或清空 - 性能敏感场景下，
visibility: hidden触发重绘（repaint）但不触发重排（reflow），比display: none更轻量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
