目录

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

执行结果

参考

相关链接

外部链接


跳至内容顶部