[JavaScript知识库]关于line-height行高的取值

行高的取值有：
1.px，像素值；
2.数字；
3.em;
4.百分比

这里关键说明一下父元素设置为’rem’和’数字’的对后代元素的影响

  <style>
        .container {
            /* 行高为字体大小的两倍 */
            /* 先计算像素值，子元素再继承 */
            line-height: 2em; 
        }
        .p1{
            font-size: 40px;
        }

        .p2{
            font-size: 12px;
        }
    </style>
 <div class="container">
        <p class="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat impedit suscipit, amet inventore necessitatibus pariatur iste quisquam laborum hic aperiam ab.
        </p>
        <p class="p2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit repellat debitis esse praesentium odio provident ex totam, delectus expedita.
        </p>
    </div>

效果如下：

原因如下：div的line-height是2em,意思是齐字体大小的2倍。font-size继承浏览器默认的font-size，为16px,则div的line-height为16px,子元素p1和p2的line-height均为32px。我们可以在浏览器中看出：
p1的：

p2的:

 .container {

            /* 行高为字体大小的两倍 */
            /* 子元素先继承，再计算 */
            line-height: 2;
        }
        .p1{
            font-size: 40px;
        }

        .p2{
            font-size: 12px;
        }
    </style>
    <div class="container">
        <p class="p1">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet molestiae sed doloremque sapiente? Explicabo, quidem itaque, repudiandae fugiat impedit suscipit, amet inventore necessitatibus pariatur iste quisquam laborum hic aperiam ab.
        </p>
        <p class="p2">
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur earum corporis, eius, ut ratione nihil exercitationem cum voluptatibus et velit repellat debitis esse praesentium odio provident ex totam, delectus expedita.
        </p>
    </div>

说明如下：
div的line-height为2，则它的子元素继承下2，然后各自按照它们的font-size进行计算，则p1的line-heigh为40px2=80px，则p2的line-heigh为12px2=24px。

在控制台中显示如下：


注：对于父元素本身而言，line-height均为32px，实际开发中直接写数字的场景会多一些。因为子元素的font-size不尽相同