visibility

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

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

/* Global values */
visibility: inherit;
visibility: initial;
visibility: revert;
visibility: revert-layer;
visibility: unset;

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

visible

元素框可见。

hidden

元素框不可见（未绘制），但仍会像往常一样影响布局。元素的后代如果将其 visibility 设置为 visible，则将可见。元素无法获得焦点（例如，在通过 选项卡索引 导航时）。

collapse

collapse 关键字对不同的元素有不同的影响

• 对于 <table> 行、列、列组和行组，行或列将被隐藏，并且它们将占据的空间会被移除（就好像将 display: none 应用于表格的列/行）。但是，其他行和列的大小仍然按计算表格中已折叠行或列中的单元格存在的方式计算。此值允许快速从表格中删除行或列，而无需强制重新计算整个表格的宽度和高度。
• 已折叠的 Flex 项目和红宝石注释将被隐藏，并且它们将占据的空间会被移除。
• 对于其他元素，collapse 将与 hidden 相同对待。

在元素上使用 visibility 值为 hidden 将将其从 辅助功能树 中移除。这将导致元素及其所有后代元素不再由屏幕阅读器技术宣布。

动画时，可视性值将在可见和不可见之间插值。因此，开始值或结束值之一必须是 visible，否则将无法进行 插值。该值将作为离散步骤进行插值，其中缓动函数的 0 到 1 之间的值映射到 visible，而缓动函数的其他值（仅在过渡的开始/结束处发生或作为具有 [0, 1] 之外的 y 值的 cubic-bezier() 函数的结果发生）映射到更接近的端点。

• 一些现代浏览器缺少或部分不正确地支持 visibility: collapse。它可能不会在除表格行和列以外的元素上被正确地视为 visibility: hidden。
• 当应用于表格行时，如果表格包含跨越可见行和折叠行的单元格（<td> <tr> 元素），则单元格可能会以意想不到的方式呈现。如果跨越单元格是在折叠行中定义的，浏览器不会呈现表格单元格，就像后续行中的单元格存在且应用了visibility: collapse一样。当单元格在可见行中定义并跨越折叠行时，单元格内容不会重新流动，但单元格本身的呈现方式因浏览器而异。大多数浏览器会将单元格的块大小减少隐藏行的块大小。这意味着内容可能比单元格在块大小方向上的尺寸更大。根据浏览器，溢出的内容要么被裁剪，就像设置了overflow: hidden一样，而内容在其他浏览器中会像设置了overflow: visible一样流入下一行。在其他浏览器中，单元格的呈现方式就好像该行没有折叠一样，该行中的所有其他单元格都隐藏了，就像在单个单元格而不是行本身设置了visibility: collapse一样。
• visibility: collapse可能会改变表格的布局，如果表格在折叠的单元格内嵌套了表格，除非在嵌套表格上显式指定了visibility: visible。

visibility = 
  visible   |
  hidden    |
  collapse  

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;
}

• display