Open XueSeason opened 8 years ago
首先来一张盗图，否则完全不知道 line-height 所云。
其中半行高的计算公式：
半行距 = （line-height - font-size）/2
如果 line-height 小于 font-size，那么半行距就会出现负值的情况，此时会造成文字换行时重叠。
line-height 默认值 1.2，即 normal。注意 line-height 是可以被继承的，但是我们会遇到这样一种情况：
父元素 font-size: 16px; line-height: 150% => 计算可得到最终父元素的 line-height = 16px * 150% = 24px。
那么子元素继承的 line-height 到底是 150% 还是 24px ？ 答案是后者 24px。
由此得出，_通过百分比设值，子元素继承父元素的行高是以最终计算结果为准。_
接着如果 line-height 的值不是百分比，而是 normal 形式的普通值，结果完全相反：
父元素 font-size: 16px; line-height: 1.5 => 计算可得到最终父元素的 line-height = 16px * 1.5 = 24px。
最终子元素继承的 line-height 为 1.5，如果此时子元素的 font-size 为 8px，那么就可以推算出子元素的 line-height = 8px * 1.5 = 12px。
就酱，一般 line-height 的知识点也就这些，具体可以参考表格：
在 CSS 中对元素的高度直接影响的元素，一个是 height，另一个就是 line-height。如果我们没有去设置 height，那么就只有 line-height 影响到元素高度（这里避开讨论 padding 撑大元素的情况）。
回想我们刚学 CSS 的时候，<div>Hello World</div> 这里我们没有直接设置 div 的高度，我们会认为这里的高度是被文字给撑大的。其实我们一开始就错了，而且不研究下 line-height 永远都活在自己错误的理论中。
<div>Hello World</div>
有质疑的同学可以对比 font-size:20px; line-height:0; 和 font-size:0; line-height:20px; 两种情况。这里决定 div 高度的是 line-height，而不是所谓的文字撑大。
font-size:20px; line-height:0;
font-size:0; line-height:20px;
上面的所有奥秘，可以去研究下 inline box 模型。
（未完待续）
首先来一张盗图，否则完全不知道 line-height 所云。
其中半行高的计算公式：
如果 line-height 小于 font-size，那么半行距就会出现负值的情况，此时会造成文字换行时重叠。
line-height 默认值 1.2，即 normal。注意 line-height 是可以被继承的，但是我们会遇到这样一种情况：
那么子元素继承的 line-height 到底是 150% 还是 24px ？
答案是后者 24px。
由此得出，_通过百分比设值，子元素继承父元素的行高是以最终计算结果为准。_
接着如果 line-height 的值不是百分比，而是 normal 形式的普通值，结果完全相反：
最终子元素继承的 line-height 为 1.5，如果此时子元素的 font-size 为 8px，那么就可以推算出子元素的 line-height = 8px * 1.5 = 12px。
就酱，一般 line-height 的知识点也就这些，具体可以参考表格：
重新思考
在 CSS 中对元素的高度直接影响的元素，一个是 height，另一个就是 line-height。如果我们没有去设置 height，那么就只有 line-height 影响到元素高度（这里避开讨论 padding 撑大元素的情况）。
回想我们刚学 CSS 的时候，
<div>Hello World</div>这里我们没有直接设置 div 的高度，我们会认为这里的高度是被文字给撑大的。其实我们一开始就错了，而且不研究下 line-height 永远都活在自己错误的理论中。有质疑的同学可以对比
font-size:20px; line-height:0;和font-size:0; line-height:20px;两种情况。这里决定 div 高度的是 line-height，而不是所谓的文字撑大。上面的所有奥秘，可以去研究下 inline box 模型。
一些巧用
（未完待续）