美文网首页
opacity、display、visiblity

opacity、display、visiblity

作者: 静_summer | 来源:发表于2019-08-10 23:11 被阅读0次

    opacity: 0, display: none, visiblity: hidden 的优劣和使用场景

    1. 结构:浏览器不会渲染none的结构,不会占据空间,其他都会渲染只是不可见

    2. 性能:none会引起reflow,性能差,hidden只会造成repaint,性能消耗少,opacity会造成repainit,提升为合并层,性能消耗最少

    3. 继承:none不会继承,0,会继承,子元素不管是不是none和0都消失,hidden可以继承,可以设置子元素visible来显示子元素,

    4. 事件监听:none和hidden都不能监听,0可以监听点击。

    相关文章

      网友评论

          本文标题:opacity、display、visiblity

          本文链接:https://www.haomeiwen.com/subject/hmgdjctx.html