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

结构：

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

继承：

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

性能：

display: none : 修改元素会造成文档回流,读屏器不会读取 display: none 元素内容，性能消耗较大 visibility: hidden : 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取 visibility: hidden 元素内容 opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：

它们都能让元素不可见

来源：https://muyiy.cn/question/

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持