在前端样式属性中，我们经常会使用line-height这个属性，在刚开始学习css的时候，很多人经常会直接把line-height的属性值写成固定值，比如line-height: 14px;，简单粗暴，也能马上看到效果。但是这种方法的缺点就是，到处写line-height属性，不易于代码的后期维护。下面我们就line-height这个属性做一个介绍：
首先，我们看下MDN上对line-height属性取值的介绍：
normal
取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。
<number>
该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常，由此描述可见，number的计算值与文字本身的大小有关系，即`line-height : number * 文字本身的font-size`
<length>
指定<length> 用于计算 line box 的高度。查看<length> 获取可能的单位。
<percentage>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。，由此描述可见，number的计算值与文字本身的大小有关系，即`line-height : number * 父元素字体的font-size`
下面我们就来一一介绍下每种属性的作用：
- normal
<div class="div" style="font-size:14px; line-height:normal;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
normal
normal属性是根据浏览器来计算行高的，父子元素都是。
- number
<div class="div" style="font-size:14px; line-height:1.4;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
number
- length
<div class="div" style="font-size:14px; line-height:44px;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
length
- percentage
<div class="div" style="font-size:14px; line-height:300%;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
Paste_Image.png
从上面4张图片，我们可以看出normal和number的字体分布是比较规则的，但是length和percentage就显得有些不整齐，其原因就是normal和number都根据现实的字体本身处理成合适的行高，而length是设定成了固定的行高，percentage也是根据父元素font-size产生的行高，导致三段问题行高相同！
下面我们再根据一些实例来明显的分辨出它们的不同
<div class="div" style="font-size:14px; line-height:normal;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
<p class="line">-------------------------------------</p>
<div class="div" style="font-size:14px; line-height:1;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
<p class="line">-------------------------------------
<div class="div" style="font-size:14px; line-height:14px;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
<p class="line">-------------------------------------
<div class="div" style="font-size:14px; line-height:100%;">
<p style="font-size:20px;">我是一个line-height</p>
<p style="font-size:30px;">我是一个line-height</p>
<p style="font-size:40px;">我是一个line-height</p>
</div>
demo
由上图可以看出，把行高设成normal或者合适的number比较合适，显示起来的字体行高比较合适，当设置成固定行高或者百分比时，可能会导致字体显示错乱，或者我们为了修改这个问题在很多地方设置line-height，导致代码维护很困难。
综上所述，建立大家在需要设置行高时尽量使用line-height: 数值的方式，这里也能看出line-height设置成数字和百分比的区别。
