opacity: 0、visibility: hidden、display: none三者区别
opacity: 0、visibility: hidden、display: none三者都是让对应的元素不可见，区别可以从结构、继承、性能三点上面来讲
结构：
display:none: 会让元素完全从dom中消失，渲染的时候不占据任何空间, 不能点击visibility: hidden:不会让元素从dom中消失，渲染元素继续占据空间，只是内容不可见，不能点击opacity: 0: 不会让元素从dom中消失，渲染元素继续占据空间，只是内容不可见，可以点击
继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。
性能：
displaynone: 修改元素会造成文档重排,读屏器不会读取display: none元素内容，性能消耗较大visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容opacity: 0： 修改元素会造成重绘，性能消耗较少
