line-height
1.line-height含义
行高(line-height):指的是上面一行文字的基线与下面一行文字基线间的距离
行距: 指的是2行文字之间的距离
lineHeight = fontSize + 行距
见下图
由此可见：line-height的大小与font-size息息相关，除了指定line-height为多少px，剩下的设置方式都是基于font-size算出来的。
2.line-height取值
line-height: normal;
取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
line-height: 2.5;
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
子元素会默认继承父元素的line-height:如果子元素也是block元素，则单行文本下height=line-height;如果子元素是inline元素，则高度还是由内容撑开，但是line-height还是继承自父元素的，因此会影响布局！
line-height: 32px;
<div style="line-height:64px;font-size:32px">
<p style="font-size:24px;">行间距</p> // p行高为64px
</div>
line-height: 3em;
<div style="line-height:2em;font-size:32px"> 2*32 = 64
<p style="font-size:24px;">行间距</p> // p行高为64px
</div>
line-height: 150%;
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果（见下面第二个例子）。子元素会继承父元素的line-height，那么它继承的是什么呢，百分比（120%）？还是19.2px？ 答案是后者，19.2px，即父元素line-height计算后的最终值。
line-height值为1.5; 150% 50px 50em的区别?
数字为：子元素继承父元素的数字，然后当前的字体尺寸相乘来设置行间距。 150% 50px 50em：子元素继承的是父元素的line-height*父元素的font-size
1.5, 是以自身的font-size进行计算的。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
150% ，50px 是以自身 指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果（见下面的例子）。
50em
补充：em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
