空间占据上的区别
如果用文字来描述，简单一句话就是display:none的元素是彻底消失，也就是说该元素的宽度、高度等各种属性值都将“丢失”，不在文档流中占位，浏览器也不会解析该元素；而visibility:hidden只是视觉上消失了，可以理解为透明度为0（opacity:0）的效果，它仍具有高度、宽度等属性值，因此在文档流中占位，浏览器会解析该元素。
因此，我们可以知道display:none的元素隐藏后不占据额外空间，状态切换会产生回流和重绘，而visibility:hidden的元素虽然隐藏了，但它们仍然占据着空间，它的状态切换只会引起页面重绘。
<style>
div {
width: 200px;
height: 200px;
background: #ccc;
margin-top: 10px;
}
.div1 {
display: none;
}
.div2 {
visibility: hidden;
}
</style>
<body>
<div class="div1">
<p>display:none</p>
</div>
<div class="div2">
<p>visibility:visible</p>
</div>
</body>div1：
div2：
