display:none vs visibility:hidden

Posted 2020-09-15 Tekkaman

【display:none vs visibility:hidden】　　

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

1 .hide {
2     display:none;
3 }

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

 

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

1 .hidden{
2     visibility:hidden
3 }

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

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