display:none跟visibility:hidden的区别

display:none和visibility:hidden的区别

 

二者都能把网页上某个元素隐藏起来，在视觉效果上没有区别，但在一些DOM操作中二者还是有所不同的。

 

display:none

使用该属性后，元素的宽度、高度等各种属性值都将“丢失”。(元素彻底消失，通俗来说就是看不见也摸不到。)

 

visibility:hidden

使用该属性后，仅仅是在视觉上看不见（完全透明），而元素所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。(元素在网页上所占的空间没有改变，看不见但摸得到。)

 

 

 

 

：)