CSS之Display、Visibility和Opactity的区别

学习目标:

学过CSS的盆友(本人)都知道隐藏元素有三种方式:

  1. display
  2. visibility
  3. opacity

那么这三种方式的区别是什么呢??我就在这里来悄咪咪学习一下。


学习内容:

话不多说,直接开始:

1. display:none;

  • DOM结构:浏览器不会渲染display属性为none的元素,不占据空间,意思就是页面上没有它的一席之地,你在开发者模式中选不中那个元素。
  • 事件监听:无法进行DOM事件监听。
  • 性能:动态改变此属性时会引起重排,性能较差。
  • 继承:不会被子元素继承,因为子元素也不被渲染。
  • transtion过渡不支持display。

2. visibility:hidden;

  • DOM结构:元素被隐藏了,浏览器会渲染visibility属性为hidden的元素,占据空间,意思就是页面上有它的空间,在开发者模式中能选中那个元素。
  • 事件监听:无法进行DOM事件监听。
  • 性能:动态改变此属性时会引起重绘,性能较高。
  • 继承:会被子元素继承,子元素通过设置visibility:visible;来显示自身,使子元素取消自身隐藏。
  • transtion:visibility会立即显示,隐藏时会延时。

3. opacity:0;

  • DOM结构:opacity属性值为0时透明度为100%,元素隐藏,占据空间,opacity值为0到1,为1时显示元素。
  • 事件监听:可以进行DOM事件监听。
  • 性能:提升为合成层,不会引发重绘,性能较高。
  • 继承:会被子元素继承,子元素不能通过设置opacity:1;来取消隐藏。。
  • transtion:opacity可以延时显示与隐藏。

学习总结:

学习到这里,产生疑问:重排和重绘是什么?
接下来我会继续去学习重排和重绘。

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页