默认情况下,元素是可见的,但可以使用以下CSS规则来改变元素的可见性:
.visible { visibility: visible; } .hidden { visibility: hidden; }
这里定义了两个类visible
和hidden
, 分别用来控制元素的可见性。
visibility: visible;
用于使元素可见。
visibility: hidden;
用于隐藏元素,但是元素的空间仍然占据文档流。
另外,还有一个比较少用的可选值collapse
。
当应用于表格元素时,visibility: collapse;
可以将行或列中的单元格合并成一个单元格,不再使用单元格的空间。
table { border-collapse: collapse; } td.hidden { visibility: collapse; }
以上代码用于将表格中的某些单元格设置为collapse
,从而达到合并单元格的效果。
visibility
与display
CSS属性有所区别,display: none;
会完全从文档流中隐藏元素,并且不占用空间。而visibility: hidden;
后的元素仍然存在,但是不可见,并占据空间。