显示 / 隐藏
结构
display: none
:不占据空间,不能点击,不支持 transitionopacity: 0
:占据空间,能点击,支持 transitionvisibility: hidden
:占据空间,不能点击,支持 transition
继承
display: none
:非继承属性,但子孙节点也会消失,且无法再显示opacity: 0
:非继承属性,但元素和它的子元素都会具有相同的透明度,哪怕该元素和它的子元素有不同的 opacity 属性值visibility: hidden
:继承属性,由于继承了父级的样式,子孙节点也会消失
但可以给子孙节点重置样式,让子孙节点显示
性能
display: none
:会造成文档回流,性能消耗较大opacity: 0
:只会造成重绘,消耗性能较少visibility: hidden
:只会造成重绘,性能消耗较少
但是,不论设置哪个属性,都还是可以在控制台看见其标签元素的