visibility: hidden 会隐藏元素但保留其空间，不影响布局，与 display: none 的完全移除不同，适用于需保持占位的场景。
在CSS中，visibility: hidden 是一种控制元素可见性的方法。它能让元素不可见，但依然保留在文档流中，占据原来的空间位置，不会影响页面布局的重新排列。
visibility: hidden 的特点
使用 visibility: hidden 后，元素会：- 从视觉上隐藏，用户看不到内容
- 仍然占据页面中的原有空间和位置
- 子元素即使设置 visibility: visible 也无法显示（会被父级隐藏覆盖）
- 不影响其他元素的排版布局
例如：
.box {
visibility: hidden;
}
这个 .box 元素将不可见，但它原本所在的位置还是“空着”，周围元素不会向它塌陷或移动。
与 display: none 的区别
很多人容易混淆 visibility: hidden 和 display: none，关键区别在于占位行为：- visibility: hidden — 隐藏但占位
- display: none — 完全移除，不占任何空间
如果你希望隐藏元素的同时让其他元素“补上”空位，应该用 display: none；如果只是暂时不让用户看到，但要保留结构位置，就用 visibility: hidden。
立即学习“前端免费学习笔记（深入）”；
常见使用场景
适合使用 visibility: hidden 的情况包括：- 制作轮播图时，隐藏非当前页的幻灯片但仍保留布局
- 需要隐藏提示信息但不想引起页面跳动
- 配合 JavaScript 动态切换可见状态，避免频繁重排
基本上就这些。不复杂但容易忽略细节。关键是理解“隐藏 ≠ 移除”。
