"visibility:collapse"和"display:none"之间的区别

Question

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

Answer 1

精简版:

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

长版:

visibility: collapse完全隐藏元素(以便它不占用布局中的任何空间),但仅当元素是表元素时.

如果在表元素以外的元素上使用,visibility: collapse则表现如下visibility: hidden.这使得元素不可见,但它仍将占用布局中的空间.

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

W3C参考

Answer 2

visibility: collapse行为与visibility: hidden大多数格式化上下文完全相同:元素所需的空间在布局中是"保留的",但元素本身不会被渲染,留下空白空间.

我知道有三个例外:table-rows,table-columns和flex items,其visibility: collapse行为类似display: none,但有一个主要区别:'strut'.您可以将strut视为零大小的占位符,在布局过程中不会声明自己的任何空间,但仍然是格式化结构的一部分并参与某些大小的计算.

例如,折叠的表格行不会占据表格中的任何垂直空间,但表格列仍将按照折叠行的尺寸标注,其内容实际上是可见的.这是为了防止列在进行切换时"摇摆".同样,折叠的柔性项目不会沿主轴占据任何空间,但仍然有助于柔性线的交叉尺寸.

"不要使用display: none表格"是一个有价值的经验法则,但它并不能说明整个故事.

• 使用display: none,如果你不想让你的隐藏要素参与在表(或柔性线)布局过程中的任何方式.
• 使用visibility: collapse如果要动态显示和隐藏元素,而不稳定的表(或柔性线)布局.

这是一个代码片段,演示了表格行display: none和visibility: collapse表格行之间的区别:

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

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

Answer 3

visibility:collapse应该只用在桌子上.在其他元素上它将充当visibility:hidden.

visibility:hidden隐藏元素但仍占用元素的空间,但display:none甚至不保留空间.

资源:

• w3schools.com - 知名度
• w3schools.com - 显示

在同一主题上:

• visibility:hidden和display:none之间有什么区别？
• CSS属性:显示与可见性
• CSS显示:无和可见性:隐藏
• 不透明度:0与可见性具有完全相同的效果:隐藏

Answer 4

visibility:collapsedisplay:none仅对表元素有行为。在其他元素上，它应该呈现为hidden.