visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.

Please take two minutes to fill out our short survey.

visibility CSS 属性显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table> 中的行或列。

尝试一下

visibility: visible;

visibility: hidden;

visibility: collapse;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Hide me</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
  display: flex;
}

.example-container > div {
  background-color: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  margin: 10px;
  flex: 1;
}

#example-element {
  background-color: rgba(255, 0, 200, 0.2);
  border: 3px solid rebeccapurple;
}

要隐藏并从文档布局中移除元素，请将 display 属性设置为 none 来代替 visibility 属性。

语法

css

/* 关键字值 */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* 全局值 */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

visibility 属性可被指定为以下值：

值

visible

元素框可见。

hidden

元素框不可见（不绘制），但仍然影响常规的布局。如果将其子元素的 visibility 设置为 visible，则该子元素依然可见。元素无法获得焦点（例如通过 tab 索引进行键盘导航）。

collapse

collapse 关键字对于不同的元素有不同的效果：

用于 <table> 行、列、列组和行组，将隐藏表格的行或列，并且不占用任何空间（与将 display: none 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。
折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。
对于其他元素，collapse 被视为与 hidden 相同。

无障碍考虑

将元素的 visibility 的值设置为 hidden 会将其从可访问性树中移除。这将导致元素及其所有子元素不再被屏幕阅读器所读取。

插值

在设置动画时，会对 visibility 在可见和不可见之间插值。因此起始值或结束值之一必须是 visible，否则不会发生插值。该值会以离散的步长进行插值，计时函数的值介于 0 到 1 之间，会被映射到 visible，对于其他计时函数的值（即过渡开始/结束时或 cubic-bezier() 函数结果的 y 值在 [0, 1] 的范围之外）则映射到较为接近的一个端点。

备注

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

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

形式定义

初始值	`visible`
适用元素	所有元素
是否是继承属性	是
计算值	as specified
动画类型	a visibility

形式语法

visibility = 
  visible   |
  hidden    |
  collapse

示例

基础示例

HTML

html

<p class="visible">第一段是可见的。</p>
<p class="not-visible">第二段是不可见的。</p>
<p class="visible">第三段是可见的。注意第二段仍占用空间。</p>

CSS

css

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

表格示例

HTML

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

css

.collapse {
  visibility: collapse;
}

table {
  border: 1px solid red;
}

td {
  border: 1px solid gray;
}

规范

Specification
CSS Display Module Level 3 # visibility
Scalable Vector Graphics (SVG) 2 # VisibilityControl

浏览器兼容性

display

参见

display