display:none和visibility:hidden的区别

css样式中display:none和visibility:hidden都可以使可见元素被隐藏，但是本质上是有区别的，河南SEO通过自己的总结发现分享告诉大家。

同样是隐藏，display:none与visibility:hidden有什么区别呢?

大家可以同时用两个图片两个css样式测试一下有什么区别。当给容器加了visibility:hidden之后，轮廓还在，只不过被隐藏了。当给容器加了display:none后，容器的位置就彻底的不显示啦！！

总结：

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

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