💪第6期第6题：CSS中的visibility有个collapse属性值是干嘛用的？

[LinDaiDai]

CSS中的visibility有个collapse属性值是干嘛用的？

visibility会有这么几个个属性值：

• visible
• hidden
• collapse
• inherit

比较常用的可能是前面两个，用于控制元素的显示隐藏。且我们知道，设置为hidden是会隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。

inherit则是从父元素继承visibility属性的值。

而对于collapse，可能用的不是特别多，我们先来看下它的介绍：

• 对于一般的元素，它的表现跟hidden是一样的；
• 如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现却跟display: none一样，也就是说，它们占用的空间也会释放。

下面一起来看看这个案例😊：

html代码：

<table>
  <tr class="tr1">
    <td>
      tr1
    </td>
    <td>
      tr1
    </td>
  </tr>
  <tr>
    <td>
      tr2
    </td>
    <td>
      tr2
    </td>
  </tr>
</table>

css代码：

table {
  border: 1px solid red;
}
td {
  border: 1px solid blue;
}
.tr1 {

}

我在没给.tr1设置任何属性的时候，页面呈现的效果是这样的，很正常：

如果设置了visibility: hidden：

.tr1 {
  visibility: hidden;
}

效果如下：

虽然第一行被隐藏了，但是它的空间还是在的，就像是"隐身"了一样。

而如果设置了visibility: collapse：

.tr1 {
  visibility: collapse;
}

效果如下：

最终的效果会和display: none;一样。

如果你问呆呆这属性有什么实际的用处没有...咳咳，抱歉，好像还真没有😅。也可能是呆呆不知道，知道的小伙伴还请提出哟，一起学习一哈。