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 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

04-Vue入门系列之Vue事件处理

4.1. 监听事件的Vue处理 Vue提供了协助我们为标签绑定时间的方法,当然我们可以直接用dom原生的方式去绑定事件。Vue提供的指令进行绑定也是非常方便,而...

2255
来自专栏前端儿

CSS布局 -- 左侧定宽,右侧自适应

1452
来自专栏Java后端技术

CSS应用给网页元素的几种方式总结

  直接在HTML标签中使用style进行定义样式。如:<p style="color:red;">这里是红色文字</p>.

621
来自专栏python3

tkinter -- Place

注意 bt2放置的位置是在 root 的(0,0)处,而 button1放置的位置是在 lb1的(0,0)处,原因是由于 bt1使用了 in 来指定放置的窗口为...

741
来自专栏python3

tkinter -- Frame

...

961
来自专栏DeveWork

为 WordPress 后台管理菜单自定义排序

在对WordPress 进行二次开发时候,可能需要对 WordPress 后台管理菜单自定义排序,后台管理菜单默认的顺序是文章-多媒体-页面-评论-外观……;还...

2629
来自专栏每日一篇技术文章

weex-08-单击事件

1542
来自专栏刘望舒

React Native入门(三)组件的Props(属性)和State(状态)

前言 在Android或者iOS开发中我们会用到很多控件,这些控件会有很多的属性、样式等等。同样的,React Native中的组件也有属性、样式和状态。 1...

20110
来自专栏IMWeb前端团队

React直出实现与原理

前一篇文章我们介绍了虚拟DOM的实现与原理,这篇文章我们来讲讲React的直出。 比起MVVM,React比较容易实现直出,那么React的直出是如何实现,有什...

3918
来自专栏JavaEE

jQuery进阶前言

在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学...

1742

扫码关注云+社区

领取腾讯云代金券