visibility: hidden 的盒子仍占位，因其仅跳过绘制而不影响布局计算，子元素可设 visible 覆盖继承，且不支持 transition。
visibility: hidden 为什么盒子还在占位
因为 visibility: hidden 只让元素“不可见”，不改变布局计算——浏览器依然把它当正常盒子参与盒模型、margin 折叠、flex/grid 排列。你看到的空白，就是它实实在在占着的位置。
常见错误现象：visibility: hidden 后旁边元素没往里挤、滚动条没消失、父容器高度没变，误以为“没生效”其实是“生效得太过分”。
- 适合场景：需要保留占位但临时隐藏（比如 hover 显示/隐藏菜单项、动画过渡前的预设状态）
- 和
display: none的关键区别：后者完全剔除渲染树，不参与任何布局计算 - 继承性：
visibility是可继承属性，子元素默认也会被隐藏；若子元素显式设visibility: visible，它会重新显示（即使父级是hidden）
visibility 属性的三个合法值怎么选
visibility 只有三个标准值：visible、hidden、collapse。别写 invisible 或 off，那些不会生效。
-
visible：默认值，正常显示 -
hidden：自身不可见，但占位、响应事件（如click仍能触发，只是看不见） -
collapse：仅对表格相关元素（table-row、table-column等）有效，行为类似display: none；对普通块级元素等同于hidden
注意：visibility: hidden 不阻止焦点进入（tabindex 仍有效），也不屏蔽屏幕阅读器——无障碍需额外加 aria-hidden="true"。
立即学习“前端免费学习笔记（深入）”；
visibility 和 opacity: 0 的实际差异
两者都“看不见”，但底层机制完全不同：
-
visibility: hidden：渲染引擎跳过绘制，但保留几何信息；不响应鼠标事件（pointer-events默认为auto，但因不可见，实际无交互） -
opacity: 0：仍在绘制流水线中，只是全透明；默认仍响应鼠标事件，要禁用得加pointer-events: none - 性能影响：
visibility: hidden开销更小（少一层合成），opacity: 0可能触发图层提升，尤其在动画中
示例对比：div { visibility: hidden; } vs div { opacity: 0; pointer-events: none; }——后者更接近“视觉隐藏+交互屏蔽”，但多一次重绘和潜在图层管理。
容易被忽略的兼容性和副作用
visibility 兼容性极好（IE6+ 都支持），但有几个隐蔽坑点：
- transition 动画对
visibility无效：不能写transition: visibility 0.3s，它不支持过渡；要用opacity或配合max-height等可过渡属性模拟 - 打印样式中，
visibility: hidden通常仍会被打印出来（取决于浏览器实现），而display: none一定不打 - 某些 CSS-in-JS 库或 SSR 框架（如 Next.js）在服务端渲染时，若条件判断依赖
visibility，可能造成水合不一致（hydration mismatch）
真正想“隐藏且不占位”，别犹豫，用 display: none；只想要“暂时藏起来、位置不动”，visibility: hidden 就够用——但得清楚它不是 display 的平替，而是另一个维度的控制。
