CSS样式当中，我们可以设置字体的行高，行高的值有多种写法，我们先来看看

    1 line-height: normal;// 默认行高
    2 line-height:1.41；
    3 line-height: 200%;
    4 line-height: 50px;
    5 line-height: 5em;

    首先我们先来看line-height:50px;
    这样设置的话行高就是50px，我们设多少就是多少，其他的写法都是要经过计算的

    现在有个 <p></p> 标签，字体的大小是默认的16px. 我们给他设置行高
    ling-height :1.5 ;
    这个意思就是 1.5 字体大小 也就是 1.516px， 那么行高就是24px

    line-height:200%;
    百分比的写法就是 百分比 字体大小，也就是 2 16px=32px;

    line-height:5em
    em的写法就是 em 字体大小 也就是 5 16 = 80px;

    上面几种写法有什么区别呢？我们来看一下例子

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         body{
    9.             font-size: 14px;
    10.             line-height: 1.5;
    11.         }
    13.        body{
    14.             font-size: 14px;
    15.             line-height: 150%;
    16.         }
    18.         p{
    19.             font-size: 16px;
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24.     <p>测试行高</p>
    25. </body>
    26. </html>

    我们知道属性是会继承的。在这个例子当中，因为body包裹着p标签，我们在p标签中没有设置line-height属性，所以P标签会继承body的line-height属性

    当我们用数字写法的时候，P标签的line-height = P标签的字体大小 行高 = 16 1.5

    现在我们修改一下。用其他的写法.。如上面的%比的写法。正常来说他们161.5 跟16150%的结果是一样的

    但是，当我们用其他写法的时候，line-heigth的值是计算之后的结果，也就是14 * 150 =21px; 所以P标签的行高会变成21像素

    总结:为了避免如上例子出现的情况，行高我们一般使用数字的方式来写