当前位置: 代码迷 >> 综合 >> display:none visibility:hidden opacity:0
  详细解决方案

display:none visibility:hidden opacity:0

热度:23   发布时间:2023-12-01 01:03:11.0

三者都是不可见
结构上:
display:none 让元素从DOM中完全消失,渲染时不占据任何空间 不能点击
visibility:hidden 元素渲染时占据空间 不能点击
opacity:0 透明度的意思 占据空间 可以点击

继承上:
display:none 和 opacity:0非继承属性 如果给子节点添加display:block或者opacity:1
子节点还是无法显示
visibility:hidden 是继承属性 如果给子节点添加visibility:visible子节点会显示

性能上:
display:none会引起重排
visibility:hidden 会引起重绘
opaction: 提升到合成层 不会引起重绘 性能最高

  相关解决方案