Question

visibility:collapse和display:none之间的区别是什么？

Answer 1

简短版：

前者用于完全隐藏表格元素。后者用于完全隐藏其他所有内容。

长版：

visibility: collapse完全隐藏了一个元素（因此它不会占用布局中的任何空格），但仅限于the element is a table element。

如果在表格元素以外的元素上使用，visibility: collapse将像visibility: hidden一样使用。这使得元素不可见，但它仍将占用布局中的空间。

display: none隐藏了完全元素，因此它不占用布局中的任何空格，但不应在表格元素上使用。

W3C Reference

Answer 2

在大多数格式化上下文中，

visibility: collapse的行为与visibility: hidden完全相同：元素所需的空间是“保留”＃39;在布局中，但元素本身不会被渲染，留下一个空白区域。

我知道有三个例外：表格行，表格列和弹性项目，其中visibility: collapse的行为类似display: none，但有一个主要区别：＆＃39; strut＆＃39 ;.您可以将strut视为零大小的占位符，在布局过程中不会声明自己的任何空间，但仍然是格式化结构的一部分并参与某些大小的计算。

例如，折叠的表格行不会占据表格中的任何垂直空间，但表格列仍将按尺寸标注＆＃39; as-if＆＃39;折叠的行及其内容实际上是可见的。这是为了防止列摆动＆＃39;摆动＆＃39;行被切换进出。同样，折叠的柔性项目不会沿主轴占据任何空间，但仍然会影响柔性线的交叉尺寸。

＆＃39;不要将display: none用于表格＆＃39;是一个有价值的经验法则，但它并不能说明整个故事。

如果您不希望隐藏元素以任何方式参与表格（或弹力线）布局过程，请使用display: none。
如果要动态显示和隐藏元素而不破坏表（或弹性线）布局，请使用visibility: collapse。

以下是一个代码段，演示了表格行display: none和visibility: collapse之间的区别：

＆＃13;

.show-right-border {
  border-right: 1px black solid;
}

＆＃13;

<h3>visibility: collapse</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="visibility: collapse;">Loooooooooong text.</td>
  </tr>
</table>

<h3>display: none</h3>
<table class="show-right-border">
  <tr>
    <td>Short text.</td>
    <td style="display: none;">Loooooooooong text.</td>
  </tr>
</table>

＆＃13;

Answer 3

visibility:collapse应仅用于表格。在其他元素上，它将充当visibility:hidden。

visibility:hidden隐藏元素，但仍然占据元素的空间，而display:none甚至不会保留空间。

资源：

关于同一主题：

Answer 4

visibility:collapse仅对表格元素有display:none行为。在其他元素上，它应呈现为hidden。

Answer 5

您还可以将visibility: collapse应用于flexbox容器（弹性项目）下的元素。它会像您将其应用于具有display: table-row或display: table-column

的元素上一样

“visibility：collapse”和“display：none”之间的区别

5 个答案: