专栏首页前端萌媛的成长之路display:none和visibility:hidden的区别

display:none和visibility:hidden的区别

空间占据上的区别

如果用文字来描述,简单一句话就是display:none的元素是彻底消失,也就是说该元素的宽度、高度等各种属性值都将“丢失”,不在文档流中占位,浏览器也不会解析该元素;而visibility:hidden只是视觉上消失了,可以理解为透明度为0(opacity:0)的效果,它仍具有高度、宽度等属性值,因此在文档流中占位,浏览器会解析该元素。

因此,我们可以知道display:none的元素隐藏后不占据额外空间,状态切换会产生回流重绘,而visibility:hidden的元素虽然隐藏了,但它们仍然占据着空间,它的状态切换只会引起页面重绘。(关于回流与重绘见下文)

举个栗子:

    <style>  
        div {  
            width: 200px;  
            height: 200px;  
            background: #ccc;  
            margin-top: 10px;  
        }  
        .div1 {  
            display: none;  
        }  
        .div2 {  
            visibility: hidden;  
        }  
    </style>  
    <body>  
        <div class="div1">  
            <p>display:none</p>  
        </div>  
        <div class="div2">  
            <p>visibility:visible</p>  
        </div>  
    </body>

在浏览器中打开控制台。我们可以看到如图,虽然两个div都并不可见,但div1没有占据物理空间,而div2却占有原本的物理空间。 div1:

div2:

关于回流和重绘

当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流。 可以参考博文: 页面重绘和回流以及优化 浏览器的渲染过程及优化

关于继承

display:none虽然不会被子元素继承,但是因为父元素都不在了,子元素自然也就不会显示了。

visibility:hidden会被子元素继承,可以通过设置子元素visibility:visible 使子元素显示出来

还是举个栗子:

    <style>  
        .div1,.div2 {  
            width: 200px;  
            height: 200px;  
            background: #ccc;  
            margin-top: 10px;  
        }  
        .div11,.div22 {
            width: 100px;  
            height: 100px;  
            background: #ff0000;  
            margin-top: 10px;  
        }
        .div1 {  
            display: none;  
        }
        .div2 {  
            visibility: hidden;  
        }
    </style>  
    <body>  
        <div class="div1">
            <div class="div11">
                <p>div11</p>
            </div>  
            <p>div1</p>  
        </div>  
        <div class="div2">
            <div class="div22">
                <p>div22</p>
            </div>  
            <p>div2</p>  
        </div>  
    </body>

如图,我们可以看到div11的dispaly属性为block,并未继承父级div1的display:none,但因为div1不占有物理空间,所以div11仍不占有物理空间。但div22却继承了div2的visibility:hidden。 div11:

div22:

我们更改代码如下:

    <style>
        .div1,
        .div2 {
            width: 200px;
            height: 200px;
            background: #ccc;
            margin-top: 10px;
        }

        .div11,
        .div22 {
            width: 100px;
            height: 100px;
            background: #ff0000;
            margin-top: 10px;
        }

        .div1 {
            display: none;
        }
        .div11 {
            display: block;
        }
        .div2 {
            visibility: hidden;
        }
        .div22 {
            visibility: visible;
        }
    </style>

    <body>
        <div class="div1">
            <div class="div11">
                <p>div11</p>
            </div>
            <p>div1</p>
        </div>
        <div class="div2">
            <div class="div22">
                <p>div22</p>
            </div>
            <p>div2</p>
        </div>
    </body>

如图发现div11仍不可见且不占有物理空间,而div22已经显示出来。

JS运用中的一些区别(学习JS后可以自行编写简单代码尝试)

事件绑定

display:none 的元素都已经不再页面存在了,因此肯定也无法触发它上面绑定的事件;

visibility:hidden 元素上绑定的事件也无法触发;

过渡动画

transition对于display肯定是无效的,大家应该都知道;

transition对于visibility也是无效的;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • iframe+postMessage实现跨域通信

    pitaojin
  • WebAssembly分享

    pitaojin
  • 元素垂直居中和水平居中的方法

    pitaojin
  • Python爬虫:Scrapy 框架快速入门及实战演练

    今天来介绍一下 Python 的一个爬虫框架Scrapy ,类似的还有 Portia Crawley。

    wsuo
  • vue3.0 高仿饿了么项目(项目初始化)

    3.iPhone6 Plus分辨率414x736,像素1242x2208,@3x,(注意,在这个分辨率下渲染后,图像等比降低pixel分辨率至1080p(108...

    用户4344670
  • 聊聊pg jdbc的queryTimeout及next方法

    本文主要介绍一下pg jdbc statement的queryTimeout及resultSet的next方法

    codecraft
  • 17. Vue 常用列表操作实例 - 删除列表数据

    在这里已经有了数组list中的id号,那么根据这个id号就可以查询到该数组在数组中的索引index。

    Devops海洋的渔夫
  • Combine SAC with RNN (part1)

    With the combination of sac and rnn. we can solve POMDP problem theoretically, b...

    用户1908973
  • 自定义无限循环ViewPager(二)――ViewPager滑动原理解析

    在前面一篇文章中,已经分析了ViewPager初始化的原理,而本篇文章开始分析ViewPager的滑动及页面切换的原理。在阅读本文之前,大家可以先去了解下Scr...

    用户3106371
  • InfluxDb+Grafana数据监控

    Grafana安装及简单使用 Windows版InfluxDB及相关软件安装与配置

    周小董

扫码关注云+社区

领取腾讯云代金券