CSS Visibility 和 Display 对比

 单击下方链接，切换"middle"div的visiblity和display属性，Tooggle Visibility链接切换值 "visible" "hidden"，Toggle Display链接切换值"block" "none"。

Click the links below to change the middle element's visibility or display property. The visibility link will toggle the css visibility property between visible and hidden. The display link will toggle the css display property between block and none.

Toggle Visibility  |  Toggle Display

Top

Middle

Bottom

 

其他资料地址：http://blog.imbolo.com/css-visibility-vs-display/

 

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 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。