元素显示隐藏三种方式的区别

在学习css的过程中，设置display，visibility和opacity的属性都能设置元素的隐藏和显示。那么它们到底有什么不同之处呢？下面的内容将带你快速地了解到这三种显示隐藏方式的区别。

总结图如下所示：

 display:none 不会继续占据空间：

 visibility：hidden  会继续占据空间

 opacity：0  会继续占据空间

 其中比较重要的是回流和重绘的区别：

display: none; 更改该属性时会引起DOM树结构变化、页面重新布局——回流。

visibility: hidden; 更改该属性时不会引起DOM树结构变化、不会引起页面重新布局，只会按照css代码重新渲染——重绘。(这是因为visibility：hidden只是把元素隐藏了，但元素本身的dom结构没有删除，只是改变了样式，这只会发生重绘）

opacity: 0;更改该属性时DOM树结构没有变化、不会引起页面重新布局，只可能会重新渲染——重绘。

重绘和回流是前端性能优化一个必须知道的知识点。了解回流和重绘对渲染页面的影响，从而做出相依的措施进行优化是前端技术人员必须掌握的技能。关于回流和重绘的知识，之后也会分享