本节介绍CSS DIV中Visibility和Display不同属性的区别，开始我们今天的css 教程吧。
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样式，注意事项：
1、如果在样式文件或页面文件代码中直接用display:none对元素进行了隐藏，载入页面后，在没有通过js设置样式使元 素显示的前提下，使用js 代码会无法正确获得该元素的一些属性，比如offSetTop,offSetLeft等，返回的值会为0，通过js设置style.display来使元 素显示后才能正确获得这些值。
2、使用display:none隐藏的元素不会被百度等搜索网站检索，会影响到网站的SEO，某些情况下可以使用left:-100000px来达到同样效果。
3、如果是通过样式文件或<style>css</style>方式来设置元素的display:none样式，用js设置 style.display=""并不能使元素显示，可以使用block或inline等值来代替。通过style="display:none"直接在 元素上进行的设置不会有这个问题。
4、有些情况下可以使用style.visibility来代替style.display，但是要注意的是style.visibility隐藏元素时会保留元素在页面上所占的空间，而style.display隐藏元素且让出所占页面空间。