【CSS篇】display-none和visibility-hidden和opacity-0的区别？

display和visibility，顾名思义就是隐藏页面元素。让我们来看看两者之间的区别。不透明度是最后要说的。一、display:none1、给元素设置display:none属性后，该元素将被隐藏，占用空间消失。原来是这样的：

添加display:none属性后事实证明，“B键”也不见了。2.给父元素设置display:none属性后，子属性也被隐藏了。原来的样子：父元素添加display:none后，子元素消失就算给子元素加块，它不会显示。3、因为display:none后元素消失，会影响li标签下的计数。比如原代码：添加隐藏子元素：因为子元素被隐藏，下面的元素自动上移。2.可见性：隐藏1。使用visibilityhidden属性后，该元素仍然占据着原来的页面空间。隐藏2之后，父元素会影响子元素，如果子元素设置为display，则去掉hidden属性。从这里可以看出第三点，visibility不会影响计算，只是给隐藏元素披上了一层隐形斗篷，不会影响其他元素。最后一点：首先了解浏览器的渲染过程：1.解析HTML，根据文档构建DOM树2.解析CSS样式表，构建CSSOM（CSSObjectModel）3.合并DOM和CSSOM生成一个RenderTree（渲染树）；在DOM树的基础上，根据节点的属性（margin/padding/width/height）生成redertree，不包括display:none,headnodes但包括visibility:hiddennodes）4.根据计算布局到RenderTree，并计算出每个元素的位置也称为布局的reflow过程5.根据RenderTree进行渲染，调用操作系统的NativeGUIAPI进行绘制。其次，理解两个概念，重绘和回流1.重绘（repoint）：当RenderTree中的某些元素需要更新属性时，但是这些属性只会影响元素的外观和风格，而不会影响布局。2.Reflow：当RenderTree的一部分（或全部）由于其中元素的大小、布局、隐藏等发生变化而需要重新构建时。因为display:none会改变页面布局，会触发reflow（回流），而visibility:hidden不会影响页面布局，只是给元素披上了一件“隐形斗篷”，所以只会触发repoint（重绘）总结：（以下display:none简写为display，visibility:hidden简写为visibility）1）display的隐藏会直接移除该元素，其占用的空间也会消失；visibility则相反，只是为隐藏元素披上了一层“隐形斗篷”，它所占据的空间并没有消失。2）显示父元素设置为隐藏后，子元素也会被隐藏，但如果子元素设置为显示则不起作用；可见性父元素隐藏子元素，父元素隐藏子元素显示才会起作用。3）Display直接去掉元素，所以会影响计数。例如，上例中的li标签会自动用下面的元素替换隐藏的元素。因为可见性是纯隐藏的，所以不会影响计数。4）由于display影响页面布局，会触发回流（reflow），而visibility只会触发repoint（重绘）。千言万语可以一句话概括，就是display把一个元素抛出界面，于是空格消失，其他元素被替换，触发回流（relayout）。而visibility只是给元素穿了一件“隐形斗篷”，所以它的空间还在，不会影响计数，只会触发重绘（布局不变，但应该加上“隐形斗篷”效果。)补充：其实还有一个方法可以隐藏元素，那就是opacity:0，这个属性是设置透明度的，取值范围是0-1，设置为0是隐藏，1是完全显示，这个method和visibility有相同的特性，简单来说就是给元素披上了一件隐形斗篷。参考文章：浏览器渲染原理介绍：https://coolshell.cn/articles...