前言: 
在使用css隐藏栏位或物件的时候, 
常常会使用到display:none和visibility:hidden这两个属性, 
但却很容易分不清楚这两个的差别, 
或是乾脆同时使用两种属性,来确保物件一定被隐藏, 
其实我们可以很简单的来区分两者的差别。 
AD: 
你知道CSS display:none和visibility:hidden的区别吗,这里和大家分享一下,使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。 
CSS display:none和visibility:hidden的区别 
visibility:hidden隐藏,但在浏览时保留位置;CSS display:none视为不存在,且不加载! 
Overflow属性值{visible|hidden|scroll|auto}前提是先要限制DIV的宽度(width)和高度(height)。二者都是隐藏HTML元素,在视觉效果上没有区别,但在一些DOM操作中二者还是有所不同的。 
CSS display:none; 
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”; 
visibility:hidden; 
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。 
具体区别请看演示代码吧: 
  
 

