首页 > 代码库 > display:none vs visibility:hidden

display:none vs visibility:hidden

display:none vs visibility:hidden】  

设置元素的display为none是最常用的隐藏元素的方法。

1 .hide {2     display:none;3 }

将元素设置为display:none后,元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。

 

设置元素的visibility为hidden也是一种常用的隐藏元素的方法,和display:none的区别在于,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。

1 .hidden{2     visibility:hidden3 }

visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景

参考:http://www.cnblogs.com/lrzw32/p/5191012.html

display:none vs visibility:hidden