display：none；与 visibility：hidden；的区别

<style type="text/css">
    #box1{
        width:100px;
        height:100px;
        background:red;
        margin-bottom:10px;
    }
    #box2{
        width:100px;
        height:100px;
        background:blue;
        margin-bottom:10px;
    }       
</style>

原始：两个大小相等，不同颜色的盒子，同时显示出来。

给 box1 样式里面加上 display:none;
box1 让出自己的物理位置，让 其余元素（box2）在空出的位置上渲染。

给 box1 样式里面加上 visibility:hidden;
box1 会隐藏，但不会让出自己的物理位置，其余元素（box2）物理位置不变。

小结：

display:none;
使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;
浏览器不加载，速度会加快；

visibility:hidden;
使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占空间位置仍然存在，也就是说它仍具有width、height等属性值。
浏览器加载，只是不显示出来。

注：若用Jqeury中的 show() 来显示元素，则只对display:none; 有效，对于用visibility:hidden; 方式隐藏的元素 无效。