line-height属性解析

在前端样式属性中，我们经常会使用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`

下面我们就来一一介绍下每种属性的作用：

1. 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属性是根据浏览器来计算行高的，父子元素都是。

2. 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

3. 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

4. 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设置成数字和百分比的区别。