前端學習——基礎篇
四、CSS學習
4.4、CSS常用樣式
4.4.2、理解CSS中的行高與基線
划分：粉色為頂線，藍色為中線，綠色為基線，紅色為底線
頂線：中文漢字的的上端沿；
中線：橫過英文字母x的中間的線；
基線：基線（base line）並不是漢字文字的下端沿，而是英文字母“x”的下端沿；
底線：中文漢字的下端沿；
內容區：是指底線和頂線包裹的區域（行內元素display：inline可以通過background-color屬性顯示出來），實際中不一定看得到，但確實存在。內容區的大小依據font-size的值和字數進行變化。
行高(line-height)：包括內容區與以內容區為基礎對稱拓展的空白區域。一般情況下，也可以認為是相鄰文本行基線間的距離。
行距：指相鄰文本行間上一個文本行基線和下一文本行頂線之間的距離。當然，也可以看作是（上文本行行高-內容區高度）/2+（下文本行行高-內容區高度）/2。
行內框：行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，但是它又確實存在，它的高度就是行高指定的高度。
行框（line box）：同行內框類似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。
行框高度等於本行內所有元素中行內框最大的值（以行高值最大的行內框為基准，其他行內框采用自己的對齊方式向基准對齊，最終計算行框的高度）。
用法：
設置元素內容的垂直對齊方式。
參數：
baseline： 基線對齊(默認值)；
sub： 下標顯示；
super： 上標顯示；
top： 頂端對齊；
text-top： 文本的頂端對齊；
middle： 中部對齊；
bottom： 底端對齊；
text-bottom： 文本的底端對齊；
百分比和長度： CSS2，可為負數。
inherit: 不繼承
注意：頂線和底線是相對於中線來計算的，當line-height為0時，頂線和底線將重合，而中線是相對於基線來計算的，基線始終在中線的下方（x的底部），vertical-algin：middle並不是對其到中線而是對齊到基線以上1/2x的位置。