display和visibility的区别以及回流和重绘

display:none会脱离文档流，不占据页面空间；

visibility:hidden,只是隐藏内容，并没有脱离文档流，会占据页面的空间。

讲述回流以及重绘之前需要先了解页面在文档加载完成之后到完全显示中间的过程：

1.根据文档生成DOM树(包括display：none的节点)

2.在DOM树基础上根据节点的几何属性(margin/padding/width/height等)生成render树(不包括display:none、head节点但会包含visibility:hidden节点)

3.在render树基础上进行一步渲染包括color，outline等样式

reflow:当render树中的一部分或者全部因为大小边距等问题发生改变而需要重建的过程叫做回流。

repaint:当元素的一部分属性发生变化，如外观背景色不会引起布局变化而需要重新渲染的过程叫做重绘。

display:none会引起回流和重绘，visibility:hidden会引起重绘

原文链接：https://blog.csdn.net/qq_41681425/article/details/81016356