Visibility 属性的用法

阅读更多

英语单词visibility：名词，意为能见度；明显性；视程；(常复数)可见物。CSS中的“visibility”属性的作用是规定元素是否可见。

 

Visibility 属性的用法

Visibility 属性共有四个可用的值（visible、hidden、collapse 和inherit），但常用的值是visible 和hidden。

 

值

描述

visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间 会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。
inherit	规定应该从父元素继承 visibility 属性的值。

 

浏览器支持

所有主流浏览器都支持 visibility 属性。但是，任何的版本的 Internet Explorer （包括 IE8）都不支持 "inherit" 和 "collapse" 属性值，而支持visible 和hidden值。

 

实例

这里的内容是可见的

这里的内容是不可见的

在这个实例中，H1使用了CSS visibility:visible，因此它的内容可见，而H2使用了CSS visibility:hidden ，H2的内容则不可见。

Visibility和Display的区别

虽然 Visibility 和 Display 属性都可以隐藏一个元素，但它们之间的不同点在于 visibility： hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而 display： none 则表现得像把元素从页面里删除了，在页面上看不出该元素还存在着。

另外，display： block 和 display： inline 的区别在于 block 元素会在页面中独占一行，而 inline 元素不会，有的对象默认为 block 元素，而有的对象则默认为 inline 元素，大家在使用时需要注意防止相同属性的重复定义。

Visibility 和Display 属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none 。

在现实中我发现人们更多的倾向于使用display 属性（相信这也是大多数人的习惯）。当你决定用display：none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

 

Visibility 对SEO 的影响

在 SEO中有时我们会通过把堆砌的关键词隐藏而达到作**弊的目的，但不应该使用visibility：hidden 和display：none ，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden 和display：none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的，搜索引擎也理解这一做法（事实上搜索引擎往往忽略CSS），因此如果你的目的不是欺骗 搜索引擎，你大可以放心地使用visibility：hidden 和display：none 去隐藏内容。