CSS样式display:none和visibility:hidden的区别

display:none和visibility:hidden都可以使可见元素被隐藏,但是本质上是有区别的,久久经验网通过一张图片告诉你

同样是隐藏,display:nonevisibility:hidden有什么区别呢?

通过调试工具,我们可以发现它们的区别,请看图:

容器没有被隐藏的时候
容器没有被隐藏的时候

 

当给容器加了visibility:hidden之后,轮廓还在,只不过被隐藏了
当给容器加了visibility:hidden之后,轮廓还在,只不过被隐藏了

 

当给容器加了display:none后,容器的轮廓彻底不显示啦!!

 

总结

虽然display:none与visibility:hidden都能达到隐藏可见元素的作用(视觉上),但事实上,visibility:hidden却占据了空间,width、height等属性依然被加载出来,它就像个透明人o(∩_∩)o 。

因此,在html+css布局的时候,根据需要,如果元素需要被隐藏但又要保留位置,那么就用visibility:hidden,如果要让元素彻底隐藏且不占据空间位置,那么display:none吧。

 

相关经验

导读书签
书签初始化中…