最常见的显示方式：无相信大家都被问过这个问题：隐藏一个元素有多少种方式？一般来说，我们有display:none、opacity:0和visibility:hidden三种方法。基于display:none的副作用，已经是很糟糕的问题了。主要缺点如下：1.显示和隐藏切换时，会引起回流（reflow），进而引起重绘（redraw），当页面中的回流增加到一定程度时，会导致cpu占用翱翔。2、无法为元素设置过渡动画，也无法进行方向测量（包括clientWidth、clientHeight、offsetWidth、offsetHeight、scrollWidth、scrollHeight、getBoundingClientRect()、getComputedStyle()）。原因是浏览器会解析HTML标签生成DOMTree。CSS生成CSSOM，然后合并DOMTree和CSSOM生成RenderTree，最后根据RenderTree的信息布局渲染界面。但是带有display:none的元素是不会加入到RenderTree中的，自然也就渲染不出来了。过渡动画。3、使用它设置显示隐藏开关时，会因为与display:flex和display:grid冲突而造成混乱。你真的了解不透明度和可见性吗？这样一来，当我们将元素设置为可见或隐藏时，使用opacity或visibility似乎是更好的选择，但是你有没有想过opacity:0和visibility:hidden是不一样的？具体有什么区别？既然标题说的是追根究底，那我们就通过几轮PK来深挖一下两者的具体区别吧：第一轮：动画属性在常见的动画效果中，淡入淡出应该是最多的了广泛使用。这时候我们应该只有一个选择：opacity和animation，因为visibility这个属性是不能做动画的。要满足动画过渡，两个值之间必须有连续的值，也就是连续的区间。Visibility显然不是Satisfied，因为可见/不可见两种状态之间没有中间状态，是“booleanhidden”。第二轮：子元素的表现设置opacity:0，visibility:hidden的元素。它们的子元素将如何受到不同的影响？首先，opacity属性不能被子元素继承，但是visibility属性是可以继承的。详见CSS3规范opacity和visibility中的属性介绍。其次，一旦设置了父元素的不透明度，子元素的最大透明度不会超过父元素，也就是说如果父元素的不透明度为0.5，那么即使子元素的不透明度设置为1，它的实际透明度会是0.5*1=0.5，所以，只要parent的透明度为0，child就没办法重新设置为visible；但是visibility的子元素还是有机会“翻身”的，即使父元素设置了visibility:hidden，子元素仍然可以用visibility:visible再次让子元素可见。第三轮：堆叠上下文（StackingContext）HTML中的元素都有自己的堆叠层次，但在某些情况下，元素会形成一个堆叠上下文（接下来被SC取代），直接“抬高”自身及其子元素的堆叠等级。元素之间不同的堆叠层次，当它们重叠时，将决定谁在Z轴上会更高，也就是谁会更靠近用户的眼睛。至于什么情况下元素会形成SC，可以参考MDN文档的详细描述。在这篇文档中，我们可以看到当一个元素的opacity属性值小于1时，就会形成SC。我们可以观察下面的代码：style="background:red;width:100px;height:100px">
