display:none、visibility:hidden、opacity:0三者之间的区别

三者共同点都是隐藏。不同点：

一、是否占据空间

display:none，隐藏之后不占位置；visibility:hidden、opacity:0，隐藏后任然占据位置。

二、子元素是否继承

display:none---不会被子元素继承，父元素都不存在了，子元素也不会显示出。

visibility:hidden---会被子元素继承，通过设置子元素visibility:visible来显示子元素。

opacity:0---会被子元素继承，但是不能设置子元素opacity:0来重新显示。

三、事件绑定

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

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

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

四、过渡动画

transition对于display是无效的。

transition对于visibility是无效的。

transition对于opacity是有效。