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 操作时需注意计算样式与内联样式的差异：
立即学习“前端免费学习笔记（深入）”；
-
element.style.visibility只读取内联样式，无法获取 CSS 规则或继承值 - 要获取真实生效值，必须用
getComputedStyle(element).visibility - 设置为
''（空字符串）不会回退到父级值，而是清空内联声明，可能触发继承 —— 但若父级也没设，则默认是visible - 慎用
visibility控制可访问性：屏幕阅读器仍会读取visibility: hidden元素的内容，如需完全隐藏语义，应加aria-hidden="true"或改用display: none
/* 示例：表格行折叠后列宽自动重分配 */ table { border-collapse: collapse; } tr.collapse-me { visibility: collapse; } td { border: 1px solid #ccc; padding: 4px; }collapse的行为在 Flex/Grid 布局中无效，也不触发重排优化；真正需要“占位但不可见”时，visibility: hidden是最稳妥的选择，但务必确认它是否符合你的交互与无障碍需求。 -
