CSS DIV中Visibility和Display属性的区别

 若是你想改变一个HTML元素的可见性，你会把这个元素的CSS属性改成visibility：hidden仍是display：none？这两个属性有什么不一样？在页面元素可见性改变时你如何应对？

CSS DIV中Visibility和Display属性的区别

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

CSS DIV中Visibility属性的用法

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

如下为引用的内容：

visibility:visible

visibility:hidden

visibility:collapse

visibility:inherit

CSS DIV中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元素，你们在使用时须要注意防止相同属性的重复定义。

CSS DIV中何时使用Visibility或者Display属性？

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

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

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

CSS DIV中Visibility和Display对SEO的影响

有时咱们会经过把堆砌的关键词隐藏而达到做弊的目的，但不该该使用visibility：hidden和display：none，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为很是小，而令访客没法发现。

有的人则由于惧怕搜索蜘蛛的的反感而为visibility：hidden和display：none的使用的烦恼。其实有不少漂亮的效果是经过元素可见性的转换而实现的，搜索引擎也理解这一作法（事实上搜索引擎每每忽略CSS，bolo注），所以若是你的目的不是欺骗搜索引擎，你大能够放心地使用visibility：hidden和display：none去隐藏内容。

web页面前台编码时常常用到display:none样式，日常使用时发现有几点特征须要注意 ：

    一、若是在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有经过js设置样式使元素显示的前提下，使用js 代码会没法正确得到该元素的一些属性，好比offSetTop,offSetLeft等，返回的值会为0，经过js设置style.display来使元 素显示后才能正确得到这些值。  二、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些状况下可使用left:-100000px来达到一样效果。  三、若是是经过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置 style.display=""并不能使元素显示，可使用block或inline等值来代替。经过style="display:none"直接在 元素上进行的设置不会有这个问题  四、有些状况下可使用style.visibility来代替style.display，可是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。