元素不可见

display: none、visibility: hidden、opacity: 0

结构

1. display: none：会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击
2. visibility: hidden：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
3. opacity: 0 ：不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承

1. display: none、opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
2. visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式

性能

1. display: none：修改元素会造成文档回流
2. visibility: hidden：修改元素只会造成本元素的重绘,性能消耗较少
3. opacity: 0 ：修改元素会造成重绘，性能消耗较少