当前位置主页 > 资料库 > 前端教程 > CSS属性参考 | visibility

CSS属性参考 | visibility

2016-08-16
麦子学院

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前缀)会折叠除了表格单元格之外的任何东西。
相关阅读
Previous:
上一篇:CSS属性参考 | transition
Next:
下一篇:CSS属性参考 | vertical-align

我要评论

返回顶部