分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

display:none

会让元素完全从渲染树中消失，渲染的时候不占据任何空间。不能点击，子孙元素不继承该样式，但是由于display:none元素不渲染，所以子孙不可显示。

visibility:hidden

不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见。不能点击，子孙元素继承visibility:hidden样式，可自设置样式visibility:visibile覆盖祖先的visibility:hidden样式，可见的子孙元素和它本身都绑定click事件时，点击子孙元素会触发子孙的click事件，也会冒泡到visibility:hidden元素上

opcity:0

不会让元素从渲染树消失，渲染元素继续占据空间，只是透明度为0，元素不可见，可以点击。