CSS visibility 属性用于隐藏一个元素。
CSS visibility 属性用于隐藏一个元素。当取值为 hidden 时用于隐藏非表格元素，当取值为 collapse 时用于隐藏表格行或列。
使用 visibility 属性隐藏的元素只是在视觉上不可见，元素并不会被从页面中移除，元素仍然会影响页面的布局。这是和使用属性来隐藏元素不同的地方。使用属性来隐藏的元素会被从页面中移除，元素原来占据的位置会被其它元素替代。
使用 visibility 属性并设置值为 hidden 的元素，在效果上就好像该元素是完全透明的，但是它仍然会占据原来所在的位置。
当一个父元素使用了 visibility: hidden 之后，它的子元素可以通过设置 visibility: visible 来使它们可见。这是和属性有区别的第二个地方。
使用 visibility 属性隐藏后的元素不会接收鼠标事件，但是如果它的子元素是可见的，那么事件仍然会在子元素上被触发。
有些现代浏览器对 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前缀）会折叠除了表格单元格之外的任何东西。