一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
三者都是css中用于隐藏元素的属性。
1. display: none;
是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
2. visibility: hidden;
是在视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
3. opacity: 0;
也是在视觉上消失，可以理解为透明度为0的效果，
opacity可以通过0-1的取值设置元素的透明度，在文档流中占位，浏览器会解析该元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css隐藏</title>
<style>
div {
width: 200px;
height: 200px;
}
.displayHidden {
display: none;
}
.visibilityHidden {
visibility: hidden;
}
.opacityHidden {
opacity: 0;
}
</style>
</head>
<body>
<div class="displayHidden"></div>
<div class="visibilityHidden"></div>
<div class="opacityHidden"></div>
</body>
</html>
总结一下：
共同点
都用于隐藏元素。
不同点：
| 比较 | display: none; | visibility: hidden; | opacity: 0 |
|---|---|---|---|
| 占据空间 | 不占据空间 | 占据空间 | 占据空间 |
| 回流与渲染 | 引起回流 | 不会引起回流 | 不会引起回流 |
| 子代继承性 | 不继承 | 继承 | 继承 |
| 子代反继承 | 否 | 否 | 是 |
| transition效果 | 无效 | 无效 | 有效 |
| 绑定的事件 | 无法触发 | 无法触发 | 可以触发 |
上面对比中可以看到三者有
回流与渲染上的区别，要理解这个需要先弄清楚回流与重绘的概念。
什么是回流
当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。
每个页面至少需要一次回流，就是在页面第一次加载的时候，这时候是一定会发生回流的，因为要构建render tree。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。
什么是重绘
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。
区别：
他们的区别很大：
回流必将引起重绘，而重绘不一定会引起回流。比如：只有颜色改变的时候就只会发生重绘而不会引起回流
当页面布局和几何属性改变时就需要回流
比如：添加或者删除可见的DOM元素，元素位置改变，元素尺寸改变——边距、填充、边框、宽度和高度，内容改变
