如果container写line-height的是2em,那么看container的父元素body没有设置字体大小,于是找html也没有设置字体大小,于是使用浏览器设置的默认字号大小16px(浏览器中可设置)。这里写的2em,所以计算下来是32px,于是p1和p2继承下来都是32px。
但是如果写的line-height是2,下面的p1和p2先继承这个2,然后font-size是当前元素,所以高度就是它们的字体大小乘以2,分别是80px和24px了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container {
/* 行高为字体大小的两倍 */
/* 先计算像素值,再继承 */
/* line-height: 2em; */ /* 这里跟写200%是一样的, 但是下面写2就不一样了 */
/* 行高为字体大小的两倍 */
/* 先继承,再计算 */
line-height: 2;
}
.p1{
font-size: 40px;
}
.p2{
font-size: 12px;
}
</style>
</head>
<body>
<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>
</body>
</html>