首页 » HTML与CSS » 阅读文章

CSS中使用Visibility和Display

2011-06-07 23:24 7671 1 发表评论
标签:

如果你想改变一个 HTML 元素的可见性,你会把这个元素的 CSS 属性改为 visibility: hidden 还是 display: none
?这两个属性有什么不同?在页面元素可见性改变时你如何应对?

 

VisibilityDisplay 属性的区别

 

这里有个 Demo 可以比较 visibility: hidden 和 display: none 的区别。点击页面上部的链接,页面里绿色的 Div
将会进行相应的改变。请留意一下当绿色的 Div 属性分别被设为 visibility: hidden 和 display: none
时对其它元素会有什么影响。

 

Visibility 属性的用法

 

Visibility 属性共有四个可用的值(visible、hidden、collapse 和 inherit),但常用的值是 visible 和
hidden。

 

 

以下为引用的内容:

visibility: visible
/* 元素可见,默认值 */
visibility: hidden
/* 元素不可见,但仍然为其保留相应的空间 */
visibility: collapse
/* 只对 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 去隐藏内容。

本文地址:http://www.jwzzsw.com/archives/849.html

文章作者:思悟
版权所有 © 转载时请以链接形式注明作者和原始出处!

评论 共1条 (RSS 2.0) 发表评论

  1. 远走高飞说道:

    学习下,帮顶

发表评论

联系我 Contact Me

回到页首