相同作用
能够对元素进行隐藏
不同
1.空间占据
display: none;不占据空间，所以动态改变此属性时会引起重排。
visibility: hidden元素会被隐藏，但是不会消失，依然占据空间。
opacity=0只是透明度为100%,元素隐藏，依然占据空间。
2.继承性
display:none不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了。
visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来
opacity: 0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示
| 总结 | |||
|---|---|---|---|
| opacity:0 | visibility:hidden | display:none | |
| 是否占据页面空间 | 是 | 是 | 否 |
| 子元素设置该属性其他值是否可以继续显示 | 否 | 是 | 否 |
| 自身绑定的事件能够出发 | 能触发 | 不能触发 | 不能触发 |
| 是否挡住其他元素出发事件 | 影响 | 不影响 | 不影响 |
| 是否产生回流（reflow) | 不产生 | 不产生 | 产生 |
| 是否产生重绘 | 不一定产生 | 产生 | 产生 |
