目录

visibility

visibility 属性有两种用法:取值为 hidden 时隐藏元素,并将其所占空间用空白占位。取值为 collapse 时隐藏表格的一行或一列。

 

语法

visibility: visible 
visibility: hidden 
visibility: collapse

描述
visible 此关键词表示元素正常显示。
hidden 此关键词用于隐藏元素,其他元素的布局不改变,相当于使用此属性的元素编程透明。另外如果将其子元素设为visibility: visible,则该子元素依然可见。
collapse 此关键词用于表格行、列、列组和行组,隐藏表格的行或列,并且不占用任何空间(与将 display: none 用于表格的行/列上的效果相当)。但是其他行与列的宽和高不会重新计算,行与列的宽高计算依然会将被设为 collapse 的行和列考虑进去。这是用于快速从表格中删除一行或一列,而无需重新计算表格其他元素的宽和高。(用于其他元素时,collapse 效果与 hidden 相同。)

例子

HTML

<div id="red">
</div>
<div id="orange">
</div>
<div id="green">
</div>  

CSS

#red {
     width: 200px;
     height: 50px;
     background: red;
}
#orange {
     width: 200px;
     height: 50px;
     background: orange;
     visibility: hidden;
}
#green {
     width: 200px;
     height: 50px;
     background: green;
}

执行结果

参考

相关链接

外部链接