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

1. 占用位置的区别：

display: none; 是不占用位置的

visibility: hidden; 虽然隐藏了，但是占用位置

<p>111</p>
<div style="display: none;">111111</div>
<p>222</p>
<p>aaa</p>
<div style="visibility:hidden">aaaaaa</div>
<p>bbb</p>

2. 重绘和回流的问题

display: none;和visibility: hidden; 都会产生重绘

display: none; 还会产生一次回流

产生回流一定会造成重绘，但是重绘不一定会造成回流

产生回流的情况：改变元素的位置、显示隐藏元素…

产生重绘的情况：样式改变（background、color）…