1. 行高(line-height)、行距、font-size分別是什么。
行高(line-height)是指文本行基線間的垂直距離。 基線（base line）並不是漢字文字的下端沿，而是英文字母“x”的下端沿。下圖中兩條紅線之間的距離就是行高，上行的底線和下一行頂線之間的距離就是行距，而同一行頂線和底線之間的距離是font-size。
line-height=行距+font-size
2. line-height和height的關系
在沒有設置div的height屬性時，div的高度根據line-height的大小而變化，且文字垂直居中。
CSS: .test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;} html: <div class="test2">測試</div>
（1）height = line-height時
（2）height>line-height時
（3）height<line-height時
3. lineheight 總結
四種盒子：inline box、line box、content area、containing box
-
inline box (行內框) 每個行內元素會生成一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，行內框的高度等於
font-size，設定line-height時，行內框的高度不變，改變的是行距。 -
line box （行框） 行框是指本行的一個虛擬的矩形框，由該行中行內框組成。行框也是瀏覽器渲染模式中的一個概念，無法顯示出來。行框高度等於本行中所有行內框高度的最大值。當有多行內容時，每一行都有自己的行框。
-
content area （內容區） 內容區是圍繞着文字的一種box，無法顯示出來，其高度取決於
font-size和padding。個人覺得：內容區的高度 = font-size + padding-top + padding-bottom，有待查證，也期待小伙伴們給出答案~ -
containing box containing box 是包裹着上述三種box的box，有點繞哈~看圖
瀏覽器默認的line-height為1.2， line-height的大小與font-size息息相關，除了指定line-height為多少px，剩下的設置方式都是基於font-size算出來的。
| 設置方式 | line-height | 計算后的line-height | 子元素繼承的line-height |
|---|---|---|---|
| inherit | 父元素的line-height值 | 不用計算 | 父元素的line-height值 |
| length | 20px | 不用計算 | 20px |
| % | 120% | 自身font-size (16px) * 120% = 19.2px | 繼承父元素計算后的line-height值 19.2px，而不是120% |
| normal | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 繼承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 純數字 | 1.5 | 自身font-size (16px) * 1.2 = 19.2px | 繼承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
純數字方式與 normal 唯一的不同，就是數值的大小，純數字可以自己隨意設定，而 normal 的值是瀏覽器決定的。