display、opacity、visibility的区别？

共同点 都让元素不可见 二者区别 隐藏后是否占据原有空间 display：none ，不占据空间，页面重新渲染 visibility：hidden 占据空间，不能触发点击事件 opacity：0 ，占据空间，仍可触发点击事件 性能 display：none 引起页面回流与重绘，性能消耗大 visibility：hidden 只造成本元 0 Comments

共同点

都让元素不可见

二者区别

  • 隐藏后是否占据原有空间
    display：none ，不占据空间，页面重新渲染
    visibility：hidden 占据空间，不能触发点击事件
    opacity：0 ，占据空间，仍可触发点击事件

  • 性能
    display：none 引起页面回流与重绘，性能消耗大
    visibility：hidden 只造成本元素的重绘，性能消耗较少
    opacity：0 只造成本元素重绘，性能消耗较少

  • 继承
    display：none和opacity：0 非继承属性，修改子孙节点属也无法显示

    visibility：hidden 是继承属性，子孙节点由于继承了visibility：hidden才不显示，通过设置子节点visibility：visible就可以让子孙节点显示出来。

  • css3动画transition支持性
    transition不支持display属性
    transition动画支持opacity或者visibility属性

本文链接：https://my.lmcjl.com/post/11520.html

展开阅读全文

相关文章

4 评论

留下您的评论.