display: none; opacity: 0; visibility: hidden;

• 空间占据

display:none 隐藏后不占据额外的空间，它会产生重排重绘，而

opacity:0; visibility:hidden 元素虽然隐藏了，但它们仍然占据着空间，它们只会引起页面重绘。

• 子元素继承

display:none 不会被子元素继承，但是父元素都不在了，子元素自然也就不会显示了

visibility:hidden 会被子元素继承，可以通过设置子元素visibility:visible 使子元素显示出来

opacity:0 也会被子元素继承，但是不能通过设置子元素opacity: 0使其重新显示

• 事件绑定

display:none 的元素都已经不再页面存在了，因此肯定也无法触发它上面绑定的事件；

visibility:hidden 元素上绑定的事件也无法触发；

opacity:0 元素上面绑定的事件是可以触发的。