当前位置:首页 > 前端 > CSS > 正文内容

display:none visibility:hidden opacity:0 区别

放牧的风1年前 (2020-07-24)CSS79

display: none;

  1. DOM 结构:浏览器不会渲染 display 属性为 none 的元素,不占据空间;

  2. 事件监听:无法进行 DOM 事件监听;

  3. 性能:动态改变此属性时会引起重排,性能较差;

  4. 继承:不会被子元素继承,毕竟子类也不会被渲染;

  5. transition:transition 不支持 display。

visibility: hidden;

  1. DOM 结构:元素被隐藏,但是会被渲染不会消失,占据空间;

  2. 事件监听:无法进行 DOM 事件监听;

  3. 性 能:动态改变此属性时会引起重绘,性能较高;

  4. 继 承:会被子元素继承,子元素可以通过设置 visibility: visible; 来取消隐藏;

  5. transition:visibility 会立即显示,隐藏时会延时

opacity: 0;

  1. DOM 结构:透明度为 100%,元素隐藏,占据空间;

  2. 事件监听:可以进行 DOM 事件监听;

  3. 性 能:提升为合成层,不会触发重绘,性能较高;

  4. 继 承:会被子元素继承,且,子元素并不能通过 opacity: 1 来取消隐藏;

  5. transition:opacity 可以延时显示和隐藏


扫描二维码推送至手机访问。

版权声明:本文由放牧的风发布,如需转载请注明出处。

本文链接:https://faka.grazingwind.com/post/56.html

分享给朋友:
返回列表

没有更早的文章了...

下一篇:CSS3 @media 用法总结

相关文章

CSS3 @media 用法总结

//语法: @media mediatype and | not | only (media feature) { css-code;&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。