可见性 | visibility

visibility

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

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

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

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

初始值	visible
适用元素	all elements
是否是继承属性	yes
适用媒体	visual
计算值	as specified
Animation type	a visibility
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

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

值

visible元素正常显示。

正式语法

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在嵌套表格上明确指定，否则可能会更改表格的布局，如果表格在折叠的单元格中具有嵌套表格。

规范

Specification	Status	Comment
CSS Flexible Box Layout ModuleThe definition of 'visibility' in that specification.	Candidate Recommendation	Defines the collapse value as it applies to flex items.
CSS Basic Box ModelThe definition of 'visibility' in that specification.	Working Draft	No changes.
CSS TransitionsThe definition of 'visibility' in that specification.	Working Draft	Defines visibility as animatable.
CSS Level 2 (Revision 1)The definition of 'visibility' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.01	(Yes)	1.0 (1.7 or earlier)2	4.04	4.03	1.01
collapse	62	(Yes)	(Yes)	(Yes)	(Yes)	No support

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	1.0	1.01	(Yes)	1.0 (1.0)2	6.0	6.03	1.01
collapse	No support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	No support