css中布局属性display与visibility的区别

经常用这两个布局属性，那么css中布局属性display与visibility有什么区别呢？

display和visibility都可以用来隐藏对象：

display:none;

visibility:hidden;

css2.0手册中是这样解释的：

设置或检索是否显示对象。与 display 属性不同，此属性为隐藏的对象保留其占据的物理空间。

上面的定义简洁明了，一般来说我们用到最多的是display，例如在某些cms程序中有些功能是我们不想让显示出来的，就可以通过display来隐藏，而visibility一般用在js中。

如下图所示，分别通过一个例子来介绍了一下display和visibility的区别之处：

1、没有应用display和visibility之前的布局

2、visibility：hidden的布局

3、display:none的布局