display:none和visibility:hidden的区别

原创 新起点博客  2018-06-01 11:33 
【上云必备】上云仅?102/年

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吧。

本文地址:https://www.henenseo.com/archives/545
关注我们:请关注一下我们的微信公众号:扫描二维码新起点博客的公众号,公众号:xinqidian129
版权声明:本文为原创文章,版权归 新起点博客 所有,欢迎分享本文,转载请保留出处!
宝塔服务器面板,一键全能部署及管理,送你3188元礼包,点我领取
【腾讯云】海外1核2G服务器低至2折,半价续费券限量免费领取!

发表评论


表情

  1. 虎哥博客
    虎哥博客 【】 @回复

    很有用