csss之visibility:hidden和display:none

visibility:hidden和display:none再使用上有着看似相似的功效，但又不尽相同，在作用，定义以及对其他元素的影响上不同。

图一：原始状态

 

 

 

作用上的不同

　　visibility:hidden　　将元素隐藏，不在页面上显示

　　display:none　　　将元素属性设为无，不在网页上占据任何位置，当然也就不显示

这样一看貌似还挺像的，都可以使元素不在页面上显示，但，看下面两张图~

图二：将第一个div设置display：none属性图三：将第二个div设置visibility：hidden属性

 

 

 

 

　　两图对比，不难看出其中区别，图二当中display：none造成的不显示会导致下面的元素上移，也就是第一个div“消失了”，不占据任何位置；而图三当中visibility：hidden造成的不显示，下面的元素仍保持原始位置并没有发生位移！也就是说visibility：hidden只是隐藏了该元素，造成一种在视觉上的消失，但本质上这个元素还存在，只不过是“全透明”了！

定义上的不同

　　从作用上的不同也可以大概看出他们在定义上的不同了吧~

　　visibility属性　　指定一个元素是否是可见的，而属性值hidden就规定隐藏，不可见。

　　display属性　　定义元素应该生成的框的类型，而属性值none规定此元素不显示（在页面中彻底的消失）。　

对其他元素属性的影响

　　visibility：hidden　　使用后仅仅是在视觉上的隐藏，但其所占据的位置仍然存在，height、width等属性值仍然生效。

　　display：none　　　使用后该元素的所有属性height、width等属性值都将“丢失”。