元素不显示的几种方法异同

display: none,visibility: hidden, opacity: 0

三个样式的作用都是使目标元素不可见,它们之间也是有区别的

结构上:

  1. display: none 会让目标元素不会被渲染, 因此不占空间,不能点击。
  2. visibility: hidden目标元素会被渲染,因此占空间,不能点击。
  3. opacity: 0目标元素会被渲染,因此占空间,能点击。

继承上:

  1. display: none 父元素none后,子元素即使设置显示block也不被渲染。
  2. visibility: hidden父元素hidden后,子元素会继承,默认不可见。子元素单独设置为visible就可见。
  3. opacity: 0作用于父元素后,子元素不会继承,但其透明度也会受影响,所以也不可见;而且不能通过给子元素设置opacity: 1使其变成不透明。

性能上 :

  1. display: none会造成回流/重绘,性能影响大。
  2. visibility: hidden会造成元素内部的重绘,性能影响相对。
  3. opacity: 0 由于opacity属性启用了GPU加速,性能最好。

opacity属性补充

  1. opacity是不继承属性,父元素设置opacity,子元素并不会继承。但是因为该属性的特殊性(类似background),父元素有了透明度,子元素的样式也会被影响。
  2. 如果父元素设置opacity: 0.5,子元素设置opacity: 0.5,那么实际上子元素的透明度是0.5 * 0.5 = 0.25。
  3. 如果希望子元素不被父元素的透明度影响,我们可以使用background: rgba代替opacity: 0.

#文本溢出