display:none、visibility:hidden和opacity:0的区别

2020-04-09  

是否脱离文档流

  • display:none:使元素脱离文档流,不占据原来的空间,会引起页面的重排
  • visibility:hidden:不会脱离文档流,元素不可见仍然占据原来的位置
  • opacity:0:同 visibility:hidden

 

继承

  • display:none:子元素仍具有 display 属性,与父元素一起隐藏
  • visibility:hidden:子元素设置为 visibility:visible,可以单独显示
  • opacity:0:同 display:none

 

事件

  • display:none:无法添加事件
  • visibility:hidden:无法添加事件
  • opacity:0:可以添加事件

 

ConstXiong 备案号:苏ICP备16009629号-3