可见性 | 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元素正常显示。

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

规范

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18