display和visibility之间的区别?

Posted zrenj

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了display和visibility之间的区别?相关的知识,希望对你有一定的参考价值。

一、空间占据

display: none; 是彻底消失,不在文档流中占位,浏览器也不会解析该元素

visibility:hidden; 是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;

使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

二、子元素继承

display:none 不会被子元素继承,但是父元素都不在了,子元素自然也就不会显示了,皮之不存,毛之安附~~

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

opacity: 0 也会被子元素继承,但是不能通过设置子元素opacity: 0使其重新显示

三、事件绑定

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

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

opacity: 0元素上面绑定的事件是可以触发的。

四、过渡动画

transition对于display 肯定是无效的;

transition对于visibility 也是无效的;

transition对于opacity 是有效。

注:要设置一个DOM元素不显示在浏览器可视范围内:

设置宽高为0,设置透明度为0,设置z-index位置在-100 。

以上是关于display和visibility之间的区别?的主要内容,如果未能解决你的问题,请参考以下文章

style="visibility: hidden"和 style=“display:none”之间的区别

Vue v-show 显示隐藏

JS中style.display和style.visibility的区别

display:none;visibility:hidden;和opacity:0;的区别

v-show、v-if、v-bind

功能transition不支持display属性以及displayopacityvisibility之间的区别