【CSS】display:none、opacity:0、visibility:hidden 之间的区别

显示 / 隐藏

结构

• display: none：不占据空间，不能点击，不支持 transition
• opacity: 0：占据空间，能点击，支持 transition
• visibility: hidden：占据空间，不能点击，支持 transition

继承

• display: none：非继承属性，但子孙节点也会消失，且无法再显示
• opacity: 0：非继承属性，但元素和它的子元素都会具有相同的透明度，哪怕该元素和它的子元素有不同的 opacity 属性值
• visibility: hidden：继承属性，由于继承了父级的样式，子孙节点也会消失
  但可以给子孙节点重置样式，让子孙节点显示

性能

• display: none：会造成文档回流，性能消耗较大
• opacity: 0：只会造成重绘，消耗性能较少
• visibility: hidden：只会造成重绘，性能消耗较少

但是，不论设置哪个属性，都还是可以在控制台看见其标签元素的