前端面试题：display:none;opacity:0;visibilty:hidden;区别与联系

共同点：他们都会让元素隐藏；
区别：

结构

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

继承

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

继承

1.display:none：修改元素会造成文档回流，读屏器不会读取display：none元素内容，性能消耗较大；

2.visibilty:hidden：修改元素只会造成本元素的重绘，读屏器读取visibilty:hidden元素内容，性能优化较少；

3. opacity:0：修改元素会造成重绘，性能消耗较少。