先来看看line-height的单位：1.normal2.inherit3.number4.number+px/em/rem/……5.%line-height属性是最特殊的重点是它可以支持带单位的值或者不带单位的值。那么两者有什么区别呢？我们先看下面这个例子：https://codepen.io/donnyqi/pe...当line-height是一个没有单位的纯数字时，子元素的line-height值会继承line-heightvaluefromtheparentelement用自己的font-size值计算，成为自己的line-height值：line-height:2---->2*16=32pxline-height:2---->2*17=34pxline-height:2---->2*18=36pxline-height:3---->3*18=54px行高无单位，当line-height为纯值时会在每个后代元素下重新计算实际值当数字有单位时，子元素的line-height值会直接继承父元素的line-height值：line-height:16px---->16pxline-height:20px---->20pxline-height:24px---->24pxline-heithg:2em---->2*16=32px行高有单位，后代元素会直接继承父元素的line-height计算结果值知道无单位数与单元数组line-height值相差后，我们来看一个现象：在单位号line-height的情况下，子元素与父元素的font-size不一样：这个现象说明在单位号line-height的情况下，如果子元素元素与父元素的字体大小不同，会导致意想不到的结果，比如文本之间的遮挡问题。总结：normal和number效果一样，每个后代元素下都会重新计算实际值。系数约为1.2%，与number+px/em/rem单位效果相同。后代元素会直接继承父元素的行高计算结果Value当一个元素声明了一个带单位的值时，它的后代元素会继承父元素的行高计算值：当行-height属性以px、em、rem等单位声明，首先计算它的值，然后将计算出的值传递给任何继承它的后代元素。当元素使用没有单位的数字时，声明的值会被继承，也就是说这个值会在子元素中使用，用子元素本身的font-size重新计算子元素的line-height。所以我们通常想要的效果就是使用没有单位的line-height。我们可以在父元素上设置一个无单位的数字line-height，它的子元素会默认继承它。如果你想在子元素上有额外的样式，你可以在子元素上写行高覆盖。
