display:none 与 visibility:hidden opacity:0的区别

我们知道，我们可以用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 可以触发事件，元素只是看不见而已。