visibility

摘要

visibility 属性有两种用法：

1. 取值为 hidden 时隐藏元素，并将其所占空间用空白占位。
2. 取值为 collapse 时隐藏表格的一行或一列。

• 初始值: visible
• 应用范围: 所有元素
• 是否是继承属性: 是
• 百分比: N/A
• 媒体: visual
• 计算值: 取指定值

语法

visibility: visible | hidden | collapse | inherit

取值

visible

元素正常显示。

hidden

隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

collapse

用于表格行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是其他行与列的宽和高不会重新计算，行与列的宽高计算依然会将被设为 collapse 的行和列考虑进去。这是用于快速从表格中删除一行或一列，而无需重新计算表格其他元素的宽和高。（用于其他元素时，collapse 效果与 hidden 相同。)

示例

CodePen

p        { visibility: hidden; }   /* 隐藏段落                       */
p.showme { visibility: visible; }  /* 只有 class 设为 showme 的才会显示*/
tr.col   { visibility: collapse; } /* 折叠 class 设为 col 的行        */

注释

有些现代浏览器对 visibility: collapse 不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 visibility: hidden 的效果。

visibility:collapse 会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定 visibility: visible 。

规范

• CSS 2.1

参见

display