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之后，隐藏<col>或<colgroup>元素时不会隐藏边框。 - 在任何浏览器中，如果一个列被折叠，列中单元格的文本不会被显示。
- Opera浏览器中（带WebKit前缀）会折叠除了表格单元格之外的任何东西。
