欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

display:none、visibility:hidden和opacity:0之间的区别

程序员文章站 2024-02-19 08:36:12
...

一、空间占据

display:none隐藏后不占据额外空间，它会产生回流和重绘，而visibility:hidden和opacity:0元素虽然隐藏了，但它们仍然占据着空间，它们俩只会引起页面重绘。

代码：

<style>

div {

width: 200px;

height: 200px;

background: #ccc;

margin-top: 10px;

}

.div1 {

display: none;

}

.div2 {

visibility: hidden;

}

.div3 {

opacity: 0;

}

</style>

<body>

<div class="div1">

<p>display:none</p>

</div>

<div class="div2">

<p>visibility:visible</p>

</div>

<div class="div3">

<p>opacity:0</p>

</div>

</body>

 

页面：

display:none、visibility:hidden和opacity:0之间的区别    display:none、visibility:hidden和opacity:0之间的区别

二、子元素继承

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

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

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

代码：

 

<style>

.div1 p {

display: block;

}

.div2 p {

visibility: visible;

}

.div3 p {

opacity: 1;

}

</style>

页面效果：

display:none、visibility:hidden和opacity:0之间的区别

三、事件绑定

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

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

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

（这个就不太好在图上看了，可以自己测试一下）

四、过渡动画

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

transition对于visibility也是无效的；

transition对于opacity是有效，大家也是知道的:).

转：https://blog.csdn.net/github_39673115/article/details/77926351

相关标签： css display:none visibility:hidden opacity

上一篇： 203. Remove Linked List Elements

下一篇： 判断图片是PNG还是JPEG

推荐阅读