visibility: hidden 保留文档流占位，display: none 彻底移除；前者适用于需保持布局稳定的隐藏场景，后者导致重排且屏幕阅读器跳过。
visibility: hidden 和 display: none 的核心区别
关键在「是否脱离文档流」：visibility: hidden 只让元素不可见，但位置、尺寸、盒模型照常参与布局；display: none 则彻底移出文档流，后续元素会上移填补空位。
所以当你需要「占位但不显示」——比如做渐隐动画、预留 DOM 结构、避免布局跳动——必须选 visibility，而不是误用 display。
visibility 属性的合法值和默认行为
visibility 只有三个标准值：visible、hidden、collapse（后者仅对表格行/列生效，其他元素等同 hidden）。
注意：visibility 不支持过渡动画（transition 对它无效），但可以配合 opacity 或 transform 实现视觉隐藏+动画效果。
立即学习“前端免费学习笔记（深入）”；
常见误用点：
- 写成
visibility: false或visibility: off—— 浏览器直接忽略，退回到visible - 对父元素设
visibility: hidden，子元素即使设visibility: visible仍不可见（继承性 + 隐藏强制覆盖）
什么时候必须用 visibility 而不是 display
典型场景包括：
- 轮播图中「预加载但暂不显示」的图片容器，需保持宽高防止内容闪动
- 表单校验失败时，用
visibility: hidden隐藏错误提示，但保留其占位，避免按钮突然上移 - Canvas 或 WebGL 容器需要持续渲染但暂时不呈现，用
visibility: hidden可避免重绘中断或上下文丢失（display: none可能触发 canvas 清空） - 无障碍需求：屏幕阅读器仍可读取
visibility: hidden元素（除非加aria-hidden="true"），而display: none默认跳过
兼容性和性能小提醒
visibility 在所有现代浏览器中完全支持，IE6+ 也没问题。
性能上，它比 display: none 更轻量：浏览器仍要计算盒模型、响应式断点、伪元素，但省去了重排（reflow）开销。不过如果隐藏的是巨型列表或复杂组件，仍建议结合 will-change: visibility 或用 contain: layout style 控制影响范围。
容易被忽略的一点：用 JavaScript 检测可见性时，getComputedStyle(el).visibility === 'hidden' 是可靠判断，但 el.offsetParent 或 el.getClientRects() 在 visibility: hidden 下依然返回有效值——这点和 display: none 截然不同。
