display:none和visibility:hidden的区别？

 CSS display:none和visibility:hidden的区别:

  visibility:hidden隐藏，但在浏览时保留位置；CSS display:none视为不存在，且不加载！

 CSS display:none;

使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”;

visibility:hidden;

使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属值。

具体区别请看演示代码吧：

   

如上图所示，第一个所示display为none的div被隐藏，且所在位置被后续的div顶上;

       而第四个所示visibility为hidden的div虽然视觉上看不到，但是其所占据的空间位置仍在，并没有被后续的div顶上。