visibility
CSS 属性 visibility
显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 <table>
中的行或列。
尝试一下
语法
/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;
取值
visible
-
元素正常显示。
-
隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。要注意若将其子元素设为
visibility: visible
,则该子元素依然可见。 collapse
-
collapse
关键字对于不同的元素有不同的效果:
示例
p { visibility: hidden; } /* 隐藏段落 */ p.showme { visibility: visible; } /* 只有 class 设为 showme 的才会显示*/ tr.col { visibility: collapse; } /* 折叠 class 设为 col 的行 */
注释
有些现代浏览器对 visibility: collapse
不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成 visibility: hidden
的效果。
visibility:collapse
会改变表格的布局,嵌套在其被折叠的单元格中的表格也会同样被折叠,除非专门为此嵌套表格指定 visibility: visible
。