display:none和visibility:hidden的区别

display:none 隐藏对象。隐藏对象其物理空间

visibility:hidden 隐藏对象。保留其占据的物理空间

简单的例子：

<style>

.divpage{ clear:both; padding:10px;}

.box{ width:100px; height:50px; background:#000099; margin:10px; float:left}

</style>

<div class="divpage">

<div class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>

 

<div class="divpage">

<div class="box"></div>

<div class="box" style="display:none"></div>

<div class="box"></div>

</div>

<div class="divpage">

<div class="box"></div>

<div class="box" style="visibility:hidden"></div>

<div class="box"></div>

</div>

很明显的看出来，display:none是将对象完全性隐藏。而visibility:hidden隐藏了对象内容，却保留它的物理空间来占位。