三种隐藏方式

一、是否占用空间

display:none 这个dom元素都不会存在，自然也不会占用空间

visibility:hidden、opacity:0，隐藏后任然占据位置。

二、子元素是否会继承

display:none 不会被子元素继承，但是由于父亲元素不存在了，所以子元素也不存在了。

visibility和opacity都会被子元素继承，同时可以通过修改visibility让其重新显示，但是修改子元素opacity的时候，无法让其重新显示。

三、事件绑定上

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

visibility:hidden 不会触发它上面绑定的事件。

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

四、过渡动画

display:none由于元素已经不存在了对于transition是无效的。

Visiablity:hidden 对于transition也是无效的

opacity对于transition是有效的。