CSS：Visibility 和 Display 属性的比较

1、如果你想改变一个 HTML 元素的可见性，你会把这个元素的 CSS 属性改为 visibility:hidden还是 display:none?这两个属性有什么不同？在页面元素可见性改变时你如何应对？Visibility 和和 Display 属性的区别属性的区别这里有个 Demo 可以比较 visibility:hidden 和 display:none 的区别。点击页面上部的链接，页面里绿色的 Div将会进行相应的改变。 请留意一下当绿色的 Div属性分别被设为 visibility： hidden和 display:none 时对其它元素会有什么影响。Visibility 属性的用法Vi

2、sibility 属性共有四个可用的值 （visible、 hidden、 collapse 和 inherit） ， 但常用的值是 visible和 hidden。以下为引用的内容：visibility:visible/*元素可见，默认值*/visibility:hidden/*元素不可见，但仍然为其保留相应的空间/visibility:collapse/*只对table对象起作用，能移除行或列但不会影响表格的布局。如果这个值用在table以外的对象上则表现为hidden。*/visibility:inherit/*继承上级元素的visibility值。*/Display 属性的用法属性的用

3、法Display 属性的可用值有很多，但在这里我们只关注其中的几个值：block、none 和 inline。以下为引用的内容：display:none/*元素不可见，并且不为其保留相应的位置/display:block/*表现为一个块级元素（一般情况下独占一行）*/display:inline/*表现为一个行级元素（一般情况下不独占一行）*/从这里可以看出，虽然 Visibility 和 Display 属性都可以隐藏一个元素，但它们之间的不同点在于 visibility:hidden 在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间，而display:none 则表现得像把元素从页面

4、里删除了，在页面上看不出该元素还存在着。另夕卜， display:block 和 display： inline 的区别在于 block 元素会在页面中独占一行， 而 inline元素不会，有的对象默认为 block 元素，而有的对象则默认为 inline 元素，大家在使用时需要注意防止相同属性的重复定义。什么时候使用什么时候使用 Visibility 或者或者 Display 属性？属性？Visibility 和 Display 属性虽然都可以达到隐藏页面元素的目的，但它们的区别在于如何回应正常文档流。如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用 visibility：hi

5、dden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display:none。在现实中我（作者）更多的倾向于使用 display 属性（相信这也是大多数人的习惯，bolo 注） 。当你决定用 display:none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。Visibility 和和 Display 对对 SEO 的影响的影响有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，但不应该使用 visibility:hidden 和display:none，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。有的人则因为害怕搜索蜘蛛的的反感而为 visibility:hidden 和 display:none 的使用的烦恼。 其实有很多漂亮的效果是通过元素可见性的转换而实现的，搜索引擎也理解这一做法（事实上搜索引