visibility有三个值：visible使元素正常显示；hidden隐藏元素但保留空间；collapse用于表格，隐藏且不占空间。
在CSS中控制元素的可见性，主要通过 visibility 属性实现。它有三个常用取值：visible、hidden 和 collapse。虽然它们都影响元素的显示状态，但行为上有重要区别。
visibility: visible
这是 visibility 的默认值。
表示元素正常显示，完全可见，不影响页面布局。- 元素占据原本的空间
- 可以被用户看到
- 可触发事件（如点击、hover）
visibility: hidden
将元素隐藏，但仍然保留其在文档流中的空间。
与 display: none 不同，hidden 只是“看不见”，不是“不存在”。- 元素不可见，但位置仍被保留
- 页面布局不会重排
- 无法交互（如点击无效，但可通过 JS 强制触发）
适用于临时隐藏元素且不希望引起布局变化的场景，比如轮播图中的非活动项。
立即学习“前端免费学习笔记（深入）”；
visibility: collapse
主要用于表格元素（如 <table> 中的 <tr>、<col> 等）。
在表格上下文中，collapse 会将行或列完全折叠，不占空间，类似 display: none，但对表格结构有特殊优化。- 表格行/列隐藏，且不占用布局空间
- 其余行/列自动填补空位
- 在非表格元素上表现通常等同于 hidden
例如：隐藏某一行时，表格整体高度缩小，相邻行紧贴，视觉更自然。
基本上就这些。选择哪个值取决于你是否需要保留布局空间以及元素类型。visibility 控制的是“看得见看不见”，不影响文档流；而 display 才真正决定“是否存在”。理解这一点，就能准确使用 visibility 的各种状态。
