💪第6期第6题:CSS中的visibility有个collapse属性值是干嘛用的?
Opened this issue · 0 comments
LinDaiDai commented
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;
一样。
如果你问呆呆这属性有什么实际的用处没有...咳咳,抱歉,好像还真没有😅。也可能是呆呆不知道,知道的小伙伴还请提出哟,一起学习一哈。