三者共同点都是隐藏。不同点:
一、是否占据空间
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是有效。