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>

    <div></div>

    <div></div>

    <div></div>

</div>



<div>

    <div></div>

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

    <div></div>

</div>

<div>

    <div></div>

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

    <div></div>

</div>

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

本条目发布于2010年8月31日。属于CSS分类。