CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

rollback 发布于2019-08-29 15:34 / 1039人阅读

摘要：说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说，使用和属性，自身的事件不会触发，而使用属性，自身绑定的事件还是会触发的。

说明

opacity 用来设置透明度
display 定义建立布局时元素生成的显示框类型
visibility 用来设置元素是否可见。
opacity、visibility、display 这三个属性分别取值 0、hidden、none 都能使元素在页面上看不见，但是他们在方方面面都还是有区别的。

是否占据页面空间

举个例子

最开始的样子

黄色块div元素使用 opacity:0; 时

黄色块div元素使用 visibility:hidden; 时

黄色块div元素使用 display:none; 时

可以看出，使用 opacity 和 visibility 属性时，元素还是会占据页面空间的，而使用 display 属性时，元素不占据页面空间。

对子元素的影响

如果子元素什么都不设置的话，都会受父元素的影响，和父元素的显示效果一样，我们就来举例看看，如果子元素设置的值和父元素设置的值不同会有什么效果。
例子（opacity属性）

例子（visibility属性）

例子（display属性）

可以看出，使用 opacity 和 display 属性时，父元素对子元素的影响很明显，子元素设置的 opacity 和 display 属性是不起作用的，显示的效果和父元素一样，而使用 visibility 属性时，子元素如果设置为 visibility:visible; 并没有受父元素的影响，可以继续显示出来。

自身绑定的事件是否能继续触发

这里说的触发事件，是指用户人为的触发的事件，不包括使用 JavaScript 模拟触发的事件。
例子（opacity属性）

例子（visibility属性）

使用 display:none; 就不用举例子了，因为使用 display 属性的话，元素不仅看不见，而且也不占据页面空间，所有不会触发事件。

总的来说，使用 visibility 和 display 属性，自身的事件不会触发，而使用 opacity 属性，自身绑定的事件还是会触发的。

是否影响其他元素触发事件

例子（opacity属性）

黄色块div元素设置 opacity:0; ，通过定位，遮挡住了蓝色的p元素，当鼠标移到蓝色p元素上时，并没有触发蓝色p元素的事件。

例子（visibility属性）

黄色块div元素设置 visibility:hidden; ，通过定位，虽然遮挡住了蓝色的p元素，但是当鼠标移到蓝色p元素上时，还是触发了蓝色p元素绑定的事件。

和上边一样，display 属性就不举例子了，因为他不会占据页面空间，也就不会遮挡其他元素，就不会影响其他元素触发事件了。
所以，visibility 和 display 属性是不会影响其他元素触发事件的，而 opacity 属性如果遮挡住其他元素，其他的元素就不会触发事件了。

是否产生回流（reflow）

回流

当页面中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(也有人会把回流叫做是重布局或者重排)。
每个页面至少需要一次回流，就是在页面第一次加载的时候。

dispaly 属性会产生回流，而 opacity 和 visibility 属性不会产生回流。

是否产生重绘（repaint）

重绘

当页面中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的时候，比如background-color。则称为重绘。

dispaly 和 visibility 属性会产生重绘，而 opacity 属性不一定会产生重绘。

元素提升为合成层后，transform 和 opacity 不会触发 repaint，如果不是合成层，则其依然会触发 repaint。
在 Blink 和 WebKit 内核的浏览器中，对于应用了 transition 或者 animation 的 opacity 元素，浏览器会将渲染层提升为合成层。
也可以使用 translateZ(0) 或者 translate3d(0,0,0) 来人为地强制性地创建一个合成层。

举个例子




  


    重绘 repaint

我们可以用 Chrome DevTools 的 Rendering 来看看，
先打开 Rendering

把第一个选项勾选，这个选项会高亮显示需要重绘的区域。

看看效果

改改代码，增加上个 transition




  
  


    重绘 repaint

再看看效果

加上 transition 后就没有高亮显示了，这时候 opacity 不会触发重绘。

实际上透明度改变后，GPU 在绘画时只是简单的降低之前已经画好的纹理的 alpha 值来达到效果，并不需要整体的重绘。不过这个前提是这个被修改的 opacity 本身必须是一个图层，如果图层下还有其他节点，GPU 也会将他们透明化。

注意：回流必将引起重绘，而重绘不一定会引起回流。

是否支持transition

opacity 是支持 transition的，一般淡入淡出的效果就是这样实现的。

visibility 也是支持 transition 的。

visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”

visibility : hidden; 可以看成 visibility : 0;
visibility : visible; 可以看成 visibility : 1;

只要 visibility 的值大于0就是显示的，所以
visibility:visible 过渡到 visibility:hidden，看上去不是平滑的过渡，而是进行了一个延时。

而如果 visibility:hidden 过渡到 visibility:visible ，则是立即显示，没有延时。
注意
上面这个例子只能是从 visibility:visible 过渡到 visibility:hidden，不能从 visibility:hidden 过渡到 visibility:visible 。
当元素是 visibility:hidden; 时，自身的事件不会触发，所以像上面这个例子中，直接在蓝色块div元素上加 hover 事件，要去将自身的 visibility:hidden 过渡到 visibility:visible 是不会起作用的。
但是在其他元素上加事件，来将该元素的 visibility:hidden 过渡到 visibility:visible 是可以的，看例子。

display 不仅不支持transition，它还会使 transition 失效。举个例子看看

可以看出用了display，支持 transition 的 opacity 属性也没起作用。

这是因为display:none; 的元素，是不会渲染在页面上的，而 transition 要起作用，元素必须是已经渲染在页面上的元素，我们可以再来看个例子



 
  
  
 
 
    渲染到页面

给 span 元素绑定事件，点击它的时候，才会把黄色块div元素，渲染到DOM树上，然后改变黄色块div元素的 opacity 属性，opacity 是支持 transition 的，而在这段代码中，并没有起作用。
更详细的关于 transition 是否成功的解读看这里
渲染树决定 transtion 能否成功

要想解决这个问题，我们可以这样做。
1、把 display 属性换成 visibility 属性

2、如果必须要用 display 属性，我们可以加上定时器来解决这个问题

总结

云服务器 GPU云服务器 display属性如何将阿里云服务器的IP隐藏起来隐藏元素文件属性隐藏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113407.html

CSS中用 opacity、visibility、display 属性将元素隐藏的对比分析

摘要：说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说，使用和属性，自身的事件不会触发，而使用属性，自身绑定的事件还是会触发的。说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0...

yanest 2019-08-02 10:35 评论0 收藏0
《CSS世界》笔记五：CSS层叠规则及元素隐藏

摘要：元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界，而自身也可能处于其他层叠结界中。上一篇：《CSS世界》笔记四：流的保护与破坏写在前面《CSS世界》这本书还剩六章，但是这本书的精华部分主要是前面的内容，这里仅把后面章节相对重要的内容以博客展示，想着了解更多的小伙伴还是去阅读原文的好，毕竟三百多页的一本书并不是小小几篇博客能完全说...

godruoyi 2019-08-29 16:21 评论0 收藏0
CSS中隐藏元素的几种方法

摘要：使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。其他的方式只作了解即可，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是通过了解这些方法的特点，挖掘出其真正的使用场景几种方法的简单介绍 display:none 最常用的隐藏元素的方法 .hidden{ display:none } 将元素设置为display:none后，元素在页面上将彻底...

vvpvvp 2019-08-29 11:33 评论0 收藏0
【CSS】隐藏元素总结

摘要：本文旨在加深对隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。如果祖先元素设置了该样式，该元素及其子孙元素都将隐藏，并且没有其它让其子孙元素恢复显示的办法。四和组合溢出隐藏，也就是说盒子以外的元素都会隐藏掉。本文旨在加深对css隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。一、CSS中隐藏元素的常用方法有以下几种： 1. {display: none; /...

testbird 2019-08-30 12:56 评论0 收藏0