html visibility属性,CSS属性参考 | visibility

CSS visibility 属性用于隐藏一个元素。

CSS visibility属性用于隐藏一个元素。当取值为hidden时用于隐藏非表格元素，当取值为collapse时用于隐藏表格行或列。

使用visibility属性隐藏的元素只是在视觉上不可见，元素并不会被从页面中移除，元素仍然会影响页面的布局。这是和使用display属性来隐藏元素不同的地方。使用display属性来隐藏的元素会被从页面中移除，元素原来占据的位置会被其它元素替代。

使用visibility属性并设置值为hidden的元素，在效果上就好像该元素是完全透明的，但是它仍然会占据原来所在的位置。

当一个父元素使用了visibility: hidden之后，它的子元素可以通过设置visibility: visible来使它们可见。这是和display属性有区别的第二个地方。

使用visibility属性隐藏后的元素不会接收鼠标事件pointer-events，但是如果它的子元素是可见的，那么事件仍然会在子元素上被触发。

有些现代浏览器对visibility: collapse不支持或是不完全支持。很多时候用在不是表格行与列的元素上时不会正确的将它显示成visibility: hidden的效果。建议不要使用该属性值。

visibility:collapse会改变表格的布局，嵌套在其被折叠的单元格中的表格也会同样被折叠，除非专门为此嵌套表格指定visibility: visible。

官方语法

visibility: visible | hidden | collapse | inherit

参数：

visible：默认值，使元素可见。

hidden：使元素隐藏(变为透明)，但是不会将元素从页面中移除，元素仍然占据原来的位置。其子元素可以通过设置值visible使子元素可见。

collapse：用于表格行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间(与将 display: none用于表格的行/列上的效果相当)。但是其他行与列的宽和高不会重新计算，行与列的宽高计算依然会将被设为collapse的行和列考虑进去。这是用于快速从表格中删除一行或一列，而无需重新计算表格其他元素的宽和高。(用于其他元素时，collapse效果与hidden相同。)

inherit：继承父元素的visibility属性。

visibility属性的初始值为visible。

应用范围

visibility属性可以应用所有元素上。

示例代码

/* 隐藏段落 */

p{ visibility: hidden; }

/* 只有 class 设为 showme 的才会显示*/

p.showme { visibility: visible; }

/* 折叠 class 设为 col 的行 */

tr.col { visibility: collapse; }

在线演示

下面的例子演示隐藏父元素，但是其子元素可见的效果。

visibility是一个可以动画的属性，使用鼠标滑过这里来使父元素变得可见。

浏览器支持

所有现代浏览器都支持CSS visibility属性，包括：Chrome, Firefox, Safari, Opera, Internet Explorer, 以及 Android 和 iOS。

某些现代浏览器对visibility: collapse不支持或是不完全支持。下面列出了一些浏览器解析visibility: collapse时的问题：

webkit内核的浏览器会折叠一行，但是它占据的位置仍然会存在。

Chrome和Safari浏览器不会折叠列或列组。

Firefox浏览器在设置了border-collapse: collapse之后，隐藏

或元素时不会隐藏边框。

在任何浏览器中，如果一个列被折叠，列中单元格的文本不会被显示。

Opera浏览器中(带WebKit前缀)会折叠除了表格单元格之外的任何东西。

相关阅读