可见性 | visibility

该visibilityCSS属性可以显示或隐藏的元素在不影响文档的布局（即，为元素创建的空间，无论它们是否是可见或不可见）。该属性还可以隐藏<table>中的行或列。

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

注意：要同时隐藏一个元素并将其从文档布局中移除，请将该display属性设置为none而不是使用visibility。

语法

visibility属性被指定为下面列出的关键字值之一。

值

visible元素正常显示。

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

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

正式语法

visible | hidden | collapse

插值

Visiblity值可以在可见和不可见之间插入。因此，开始或结束值之一必须是visible或不可以发生插值。值内为离散步骤，其中之间的定时函数的值0与1地图visible和计时功能的其它值（其仅在过渡的开始/结束或作为结果而发生cubic-bezier()与外部0 y值的功能，1）映射到更近的端点。

示例

基本实例

HTML

<p class="visible">The first paragraph is visible.</p>
<p class="not-visible">The second paragraph is NOT visible.</p>
<p class="visible">The third paragraph is visible. Notice the second paragraph is still occupying space.</p>

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

表格示例

HTML

<table>
  <tr>
    <td>1.1</td>
    <td class="collapse">1.2</td>
    <td>1.3</td>
  </tr>
  <tr class="collapse">
    <td>2.1</td>
    <td>2.2</td>
    <td>2.3</td>
  </tr>
  <tr>
    <td>3.1</td>
    <td>3.2</td>
    <td>3.3</td>
  </tr>
</table>

CSS

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

注释

• visibility: collapse在某些现代浏览器中，支持缺失或部分不正确。它可能不像visibility: hidden表格行和列之外的元素那样被正确处理。

• visibility: collapse除非visibility: visible在嵌套表格上明确指定，否则可能会更改表格的布局，如果表格在折叠的单元格中具有嵌套表格。

规范

浏览器兼容性