无单位数字line-height

首先我们来了解一下line-height的单位有哪些：
1.normal
2.inherit
3.number
4.number + px/em/rem/……
5.%

line-height属性最特别的地方在于可以支持带单位的值，也可以支持不带单位的值，那这两种直接有什么区别呢？
我们先看下面的例子：
https://codepen.io/donnyqi/pe...

• 当line-height为纯数字无单位的时候，子元素的line-height的值会从父元素继承line-height值与自己本身的font-size值计算后成为自己的line-height值：
  line-height:2---->2*16=32px
  line-height:2---->2*17=34px
  line-height:2---->2*18=36px
  line-height:3---->3*18=54px
  不带单位的行高，会在每个后代元素下重新计算出实际值
• 当line-height为纯数字带单位的时候，子元素的line-height的值会直接继承父元素的line-height值：
  line-height:16px---->16px
  line-height:20px---->20px
  line-height:24px---->24px
  line-heithg:2em ---->2*16=32px
  带单位的行高，后代元素会直接继承父元素的line-height计算结果值

知道了无单位数字与有单位数组line-height值的区别之后，我们来看一个现象：有单位数字line-height的情况下子元素有跟父元素不一样font-size大小的情况:

这个现象就说明了有单位数字line-height情况下如果子元素有跟父元素不一样字号大小的情况，就会导致意想不到的结果，例如文字之间的遮挡问题。

总结：

• normal同number效果一样，会在每个后代元素下重新计算出实际值，系数约1.2
• %同number+px/em/rem单位效果一样，后代元素会直接继承父元素的line-height计算结果值
• 当一个元素是使用带单位的值声明的，那么它的后代元素会继承其父元素line-height计算结果值:行高属性是用类似px、em、rem等单位来声明时，它的值会先被计算，然后计算后的值会传到任何继承它的后代元素。
• 当一个元素是使用不带单位的数字，声明的值会被继承，也就是说这个值会在子元素中用来与子元素本身的font-size重新计算子元素的line-height。
• 所以我们通常想要的效果是使用不带单位的line-height,我们可以在父元素上设定一个无单位数字line-height,其子元素会默认继承。如果想在子元素上有额外的样式，则在子元素上写line-height覆盖即可。

本文转载于:猿2048→https://www.mk2048.com/blog/blog.php?id=hchkb22i1bb

标签：数字,继承,元素,值会,height,单位,line
来源： https://www.cnblogs.com/homehtml/p/13021017.html