我们先做一个简单的demo来实验一下：
<body>
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
</body>
<style>
.main{
width:400px;
height: 400px;
background: blue;
}
.first{
width:150px;
height: 150px;
background: red;
}
.second{
width:200px;
height: 200px;
background: green;
}
</style>
这是不做任何处理时候的页面
当给main类添加display:none时，可以看到三个方块都消失了，在f12上也找不到对应元素
当给main类添加visibility:hidden时，虽然三个方块都消失了，但在f12上仍然可以找到对应元素占据的空间。
总结得出：
display:none;
1.display:none; 是彻底消失，不占空间，浏览器也不会解析该元素，render树不存在，不会被加载渲染到页面里，但是dom树上元素还是存在的。当diaplay值为none时会产生回流和重绘。
2. 当给元素设置 display:none; 时，元素的子元素不会出现在页面中，因为元素根本没有加载到页面中，即使子元素设置如 display:block; 也不会加载到页面中。
visibility:hidden;
- 当给元素设置 visibility:hidden; 时产生box, 完全透明不可见，但占有相对空间，不会彻底消失，浏览器会解析该元素，应用的元素 dom树，render树上都存在。当visibility值为hidden时会产生只重绘不回流。
- 子元素允许覆盖值。设置 visibility:visible; 元素可见，因为设置 visibility:hidden; 的元素 dom树，render树上都存在，所以可以渲染到页面上。
1317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
