行高是相鄰兩行文字基線之間的垂直距離。看清楚是基線，估計有很多前端搞了幾年的都說不出個所以然。小時候我們寫英文26個英文本母的單詞本（隨便找個圖）
一行裡面有四條線，在css中乙個行內非替換元素（例如span，em等），其內容區都會存在四條假想的線，分別是底線（bottom）、基線（baseline）、中線（middle）、頂線（top），它們就類似於書寫英文時的四條線，其中兩紅色的線的垂直距離就是行高，通過換算一下，行高 = 頂線到底線的垂直距離+行間距（就是傳說中的控制兩行文字之前的垂直距離，可以分我上半行距和下半行距）。其實頂線到底線的垂直距離取決font-size的大小，此區域為內容區域（content area）。有個概念就可以，下面我會慢慢分析。
先看一段**：
health<
/em>
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最大的，或者最高的）。
，以下圖的結構為例子來分析下面五種定義line-height方式：
首先各個瀏覽器都有個預設的line-height（一般1.0到1.4），這個ine-height值可以理解為固定的純數字，行高都是當前font-size乘於這個固定值。如果子代不重寫line-height的話，這個是會繼承的（下面瀏覽器預設的line-height等於1.2為例子）。
繼承，這個就不用說了，預設就是inherit。
3.百分比
當父設定百分比，父的行高為當前font-size乘於這個百分比，如果子代不重寫line-height的話，子代的行高會繼承父的行高。
4.固定長度（px,em等）
當父設定固定長度，父的行高為當前這個固定長度（em是相對父級字型的），如果子代不重寫line-height的話，子代的行高會繼承父的行高。
5.純數字（理想的方式）
父和子的行高是font-size乘於這個純數字，line-height會隨著font-szie的值做相應比例縮放。
好了，到這裡就差不多已經說完了（如果有不對之處，歡迎指正，不勝感激！！！），歡樂的時光總是過得特別快,又到時候和大家講拜拜！！
深入理解CSS背景
背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...
深入理解CSS浮動
float 浮動 浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止 值 left right none inherit 初始值 none 應用於 所有元素 繼承性 無 浮動流正常流中元素乙個接乙個排列 浮動元素也構成浮動流 塊級框浮動元素自身會生成乙個塊級...
深入理解CSS背景
背景色background接受所有合法的顏色，還可以接受乙個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是transparent，如果乙個元素沒有指定的顏色，那麼背景就應當是透明的，這樣其祖先元素的背景才能可見。值 transparent inherit 初始值 tran...