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

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

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

容器没有被隐藏的时候

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

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

总结：

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

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

本站声明：本站部分文章来自网络，由用户上传分享，如若内容侵犯了您的合法权益，可联系我们进行处理。文章仅供大家学习与参考,不**本站立场。

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z