1.行高的定義
行高是相鄰兩行文本基線之間的垂直距離。看清除是基線，估計有很多前端搞了幾年的都說不出個所以然。小時候我們寫英文26個英文字母的單詞本（隨便找個圖）
一行裏面有四條線，在css中一個行內非替換元素（例如span，em等），其內容區都會存在四條假想的線，分別是底線（bottom）、基線（baseline）、中線（middle）、頂線（top），它們就類似於書寫英文時的四條線，其中兩紅色的線的垂直距離就是行高，通過換算一下，行高 = 頂線到底線的垂直距離+行間距（就是傳說中的控制兩行文字之前的垂直距離，可以分我上半行距和下半行距）。其實頂線到底線的垂直距離就是font-size的大小也可以說是內容區域（content area）。有個概念就可以，下面我會慢慢分析。
2.css boxes各種類型
先看一段代碼：
<p>
<em>Health</em> <span>is the most important thing </span> in the world
</p>
效果如下：
這斷代碼中設計到4種boxes：
1.containing box(包含盒子)
這個是最大的也是最外層的box,你可以把它理解爲一個段落(一個段落裏面很多行)，它包含了其他的boxes。
2.line boxes(行框盒子)
剛上面說了，段落下面的就是行，一個段落是由若干行組成的。
3.inline boxes(內聯盒子)
內聯盒子不會讓內容成塊顯示，而是排成一行，像例子中的span,em就是內聯盒子，如果沒有標籤包裹的 'in the world’屬於匿名內聯盒子。多個內聯盒子就形成了行框盒子，就相當多個字組合起來就形成了行。
4.content area(內容區域)
這個上面提到過，是圍繞着文字看不見的區域box,這個區域取決font-size的大小，行高就等於文字大小+行間距。比如：line-heigt:20px,font-size:16px。算出間距4px。
那是不是inline box就和行高高度是一樣，正常情況是一樣，如果line-heigt比font-size小，那麼inline box會優先行高，再如果有替換元素（img,input等）例如img插入圖片，圖片的高度比line-height高，那麼inline box會是圖片的高度。既然知道了inline box高度，之前說過多個inline box組成line box,所以line box高度取決於內部最高的inline box，有很多種可能（line-height最高的，font-size最大的，圖片最高的）。
3.line-height的用法
，以下圖的結構爲例子來分析下面五種定義line-height方式：
1.normal
首先各個瀏覽器都有個默認的line-height（一般1.0到1.4），這個ine-height值可以理解爲固定的純數字，行高都是當前font-size乘於這個固定值。如果子代不重寫line-height的話，這個是會繼承的（下面瀏覽器默認的line-height等於1.2爲例子）。
2.inherit
繼承，這個就不用說了，默認就是inherit。
3.百分比
當父設置百分比，父的行高爲當前font-size乘於這個百分比，如果子代不重寫line-height的話，子代的行高會繼承父的行高。
4.固定長度（px,em等）
當父設置固定長度，父的行高爲當前這個固定長度（em是相對父級字體的），如果子代不重寫line-height的話，子代的行高會繼承父的行高。
5.純數字（理想的方式）
父和子的行高是font-size乘於這個純數字，line-height會隨着font-szie的值做相應比例縮放。
好了，到這裏就差不多已經說完了（如果有不對之處，歡迎指正，不勝感激！！！），歡樂的時光總是過得特別快,又到時候和大家講拜拜！！