我们知道，我们可以用display:none 与 visibility:hidden opacity:0 等方法隐藏元素，那么他们有什么区别呢？
（1）是否占据空间
- display:none 不再占据空间，会引起重排和重绘
- visibility:hidden 占据空间，仅引起重绘
- opacity:0 占据控件，引起重绘
（2）是否可以被继承
- display:none 不会被子元素继承，但是子元素不会显示
- visibility:hidden 会被子元素继承，子元素可以设置visibility:visible来进行反隐藏
- opacity:0 会被子元素继承，但子元素不能通过opacity:1来进行反隐藏
（3）transition属性是否有效
- display:none 完全不受transition属性的影响，元素立即消失
- visibility:hidden 元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
- opacity:0 能够进行正常的动画效果
（4）对事件的响应
- display:none 由于元素消失，不能触发如click等事件，但可以通过js触发设置了display:none的元素的事件
- visibility:hidden 由于元素隐藏了，也不能触发click等事件
- opacity:0 可以触发事件，元素只是看不见而已。