display:none;和visibility:hidden;的区别

见到这个标题，相信很多人，会像我之前的想法一样，display:none;不就是隐藏元素不占位么，
相对的visibility:hidden;就是隐藏元素占位么。
应该是有很多人都停留在这个层面的认识。今天就说一下，这两个还有的区别。
一.
display:none;会影响页面的回流和重绘。这个其实不难理解，设置了display:none;后，
再设置display:block;页面中就相当于多出现一个占位的元素，所以浏览器要对页面进行重绘和回流。
对比visibility:hidden;就不会有此担心。因为他即便设置了hidden，也是占位的元素。
二.
display:none;的属性设置后，会影响后代元素的显示。也就是说一个元素设置display:none;之后，
其后代元素都不能显示出来。

<div id="parent" style="width:300px;height:200px;background:pink;display:none;">
	parent
	<div id="son" style="width:100px;height:20px;background:#ccc;display:block;">
		son
	</div>
</div>

显示结果如下：

下面看一下visibility:none;的设置结果

<div id="parent" style="width:300px;height:200px;background:pink;visibility:hidden;">
	parent
	<div id="son" style="width:100px;height:20px;background:#ccc;visibility:visible;">
		son
	</div>
</div>

显示结果如下：

由此可以看出，display这个属性就是，一人犯错，全家遭殃。后都不给留呀。
而visibility这个属性相对就仁慈一些，一人犯错一人当，不会牵连子孙。
所以，小伙伴们，设置隐藏的时候，需要注意喽，你是想要哪种效果，
同时也要考虑到页面回流和重绘对页面性能的影响。