visibility有四个合法值：visible、hidden、collapse、inherit；collapse在非表格元素上等同hidden，表格中则具特殊布局行为；hidden保留占位且支持过渡，display:none彻底移除且不占空间。
visibility 属性只有四个合法取值：visible、hidden、collapse 和 inherit。其中 collapse 在非表格元素上表现等同于 hidden，这点极易被忽略。
visibility: hidden 与 display: none 的关键区别
两者都让元素“不可见”，但行为完全不同：
-
visibility: hidden保留元素在文档流中的位置和尺寸，只是不渲染内容（包括子元素），仍响应pointer-events（除非显式设为none） -
display: none彻底从渲染树中移除，不占空间、不触发重排（reflow），子元素也一并消失且无法被 JS 访问到（如getBoundingClientRect()返回全 0） - 动画中，
visibility支持过渡（transition: visibility 0.3s），但仅能做“硬切”——没有中间态，常配合opacity实现淡出效果
visibility: collapse 在表格中的特殊行为
这是唯一一个在不同上下文有语义差异的取值，只对表格相关元素（<tr>、<code><td>、<code><col> 等）有意义：
- 在
<tr> 上设为 <code>collapse：整行隐藏，且后续行会上移填补空位（类似display: none的布局效果） - 在
<td> 或 <code><col>上设为collapse：列宽会重新分配，相邻列自动拉伸，而非留出空白 - 在非表格元素（如
<div>）上使用 <code>collapse，浏览器按hidden处理，但不会报错或警告
JS 中读写 visibility 的注意事项
通过 JS 操作时需注意计算样式与内联样式的差异：
