visible

如果你想改变一个HTML元素的可见性，你会把这个元素的CSS属性改为visibility：

hidden还是display：none？这两个属性有什么不同？在页面元素可见性改变时你如何

应对？

Visibility和Display属性的区别

这里有个Demo可以比较visibility：hidden和display：none的区别。点击页面

上部的链接，页面里绿色的Div将会进行相应的改变。请留意一下当绿色的Div属性分别

被设为visibility：hidden和display：none时对其它元素会有什么影响。

Visibility属性的用法

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

值是visible和hidden。

以下为引用的内容：

visibility:visible

/*元素可见，默认值*/

visibility:hidden

/*元素不可见，但仍然为其保留相应的空间*/

visibility:collap

/*只对table对象起作用，能移除行或列但不会影响表格的布局。如果

这个值用在table以外的对象上则表现为hidden。*/

visibility:inherit

/*继承上级元素的visibility值。*/

Display属性的用法

Display属性的可用值有很多，但在这里我们只关注其中的几个值：block、none和

inline。

以下为引用的内容：

display:none

/*元素不可见，并且不为其保留相应的位置*/

display:block

/*表现为一个块级元素（一般情况下独占一行）*/

display:inline

/*表现为一个行级元素（一般情况下不独占一行）*/

从这里可以看出，虽然Visibility和Display属性都可以隐藏一个元素，但它们之间的

不同点在于visibility：hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空

间，而display：none则表现得像把元素从页面里删除了，在页面上看不出该元素还存在

着。

另外，display：block和display：inline的区别在于block元素会在页面中独占一

行，而inline元素不会，有的对象默认为block元素，而有的对象则默认为inline元素，

大家在使用时需要注意防止相同属性的重复定义。

什么时候使用Visibility或者Display属性？

Visibility和Display属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如

何回应正常文档流。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：

hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：

none。

在现实中我（作者）更多的倾向于使用display属性（相信这也是大多数人的习惯，

bolo注）。当你决定用display：none来隐藏一个元素时，你必须知道其它内容将填充

到该元素留下的空白位置，从而改变页面的布局。

Visibility和Display对SEO的影响

有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，但不应该使用visibility：

hidden和display：none，而应该把关键词颜色设为和背景色相同，或者把关键词的字

号设为非常小，而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden和display：none的使

用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的，搜索引擎也理解这一

做法（事实上搜索引擎往往忽略CSS，bolo注），因此如果你的目的不是欺骗搜索引擎，

你大可以放心地使用visibility：hidden和display：none去隐藏内容。