css visibility 属性有哪些取值_元素显示控制说明

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 在表格中的特殊行为

这是唯一一个在不同上下文有语义差异的取值，只对表格相关元素（、、 等）有意义：

• 在 上设为 collapse：整行隐藏，且后续行会上移填补空位（类似 display: none 的布局效果）
• 在 或 上设为 collapse：列宽会重新分配，相邻列自动拉伸，而非留出空白
• 在非表格元素（如
  ）上使用 collapse，浏览器按 hidden 处理，但不会报错或警告

  JS 中读写 visibility 的注意事项

  通过 JS 操作时需注意计算样式与内联样式的差异：

  

  魔珐星云

  无需昂贵GPU，一键解锁超写实/二次元等多风格3D数字人，跨端适配千万级并发的具身智能平台。

  下载

  立即学习“前端免费学习笔记（深入）”；

  • 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 是最稳妥的选择，但务必确认它是否符合你的交互与无障碍需求。