《轉載》深刻理解 CSS 中的行高與基線

這篇文章總結的很好，故轉載收藏。

一、基本概念

1.  基線、底線、頂線、中線

注意：基線（base line）並非漢字文字的下端沿，而是英文字母「x」的下端沿。

2. 內容區

內容區是指底線和頂線包裹的區域（行內元素display：inline能夠經過background-color屬性顯示出來），實際中不必定看獲得，但確實存在。內容區的大小依據font-size的值和字數進行變化。

3. 行距、行高

行高（line-height）：包括內容區與之內容區爲基礎對稱拓展的空白區域，咱們稱之爲行高。通常狀況下，也能夠認爲是相鄰文本行基線間的距離。

行距：指相鄰文本行間上一個文本行基線和下一文本行頂線之間的距離。固然，我更願意認爲是（上文本行行高-內容區高度）/2+（下文本行行高-內容區高度）/2。

4. 行內框

行內框是一個瀏覽器渲染模型中的一個概念，沒法顯示出來，可是它又確實存在，它的高度就是行高指定的高度。

5. 行框

行框（line box），同行內框相似的概念，行框是指本行的一個虛擬的矩形框，也是瀏覽器渲染模式中的一個概念。行框高度等於本行內全部元素中行內框最大的值（以行高值最大的行內框爲基準，其餘行內框採用本身的對齊方式向基準對齊，最終計算行框的高度）。

 

 

Vertical-align:垂直居中

上一節咱們講解了行高與單行純文字的垂直居中（line-height），而若是行內含有圖片和文字，在瀏覽器渲染出來後，讀者能夠發現文字和圖片在垂直方向並非沿中線居中，而是沿基線對齊。這是由於，元素默認的垂直對齊方式爲基線對齊（vertical-align: baseline）。

 

CSS 語法： vertical-align

語法：

baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <長度> | inherit

說明：

設置元素內容的垂直對齊方式。

參數：

baseline： 基線對齊；

sub： 下標顯示；

super： 上標顯示；

top： 頂端對齊；

text-top： 文本的頂端對齊；

middle： 中部對齊；  //沒有研究透的屬性

bottom： 底端對齊；

text-bottom：   文本的底端對齊；

百分比和長度： CSS2，可爲負數。

初始值：baseline

繼承性：不繼承

 此處須要特別注意的是：垂直對齊屬性只對文本有效（是指包含了#Text節點的元素節點才能正確地處理vertical-align屬性）。同時，該屬性不能繼承。

屬性值詳解

在上面一節中，介紹了文本的基線、頂線、中線和底線，還有內容區、行內框和行框，而本節的垂直對齊和這幾個概念密切相關。

垂直對齊主要屬性值的表現形式如上圖所示。

 

1. 基線對齊（vertical-align : baseline）

基線對齊（vertical-align : baseline）使元素的基線同基準元素（取行高最高的做爲基準）的基線對齊

2. 頂端對齊（vertical-align : top）

頂端對齊（vertical-align : top）是將元素的行內框的頂端與行框的頂端對齊

3. 文本頂端對齊（vertical-align : text-top）

文本頂端對齊（vertical-align : text-top）是將元素行內框的頂端同文本行的頂線對齊

4. 底端對齊（vertical-align : bottom）

底端對齊（vertical-align : bottom）與頂端對齊（vertical-align : top）相反

 

5. 文本底端對齊（vertical-align : text-bottom）

6. 中間對齊（vertical-align : middle）

中間對齊（vertical-align : middle）一般使用在圖片上，將圖片的垂直方向的中線與文本行的中線對齊。（對於文字的處理有些誤差，具體依據尚未研究出來，有研究的同窗能夠聯繫我哦~~）

中線的定義爲：中線位於基線的上方，與基線的距離爲小寫字母x高度的一半（即0.5ex），而ex同font-size相關，大部分瀏覽器認爲1ex = 0.5em（em一樣也是相對單位，不是絕對單位），所以會將基線以上四分之一em處做爲中線來對齊。

7. 上標和下標

上標（vertical-align:super）使元素的基線相對於基準元素的基線升高，下標（vertical-align:sub）使元素的基線下降，移動的幅度CSS規範中沒有規定，由瀏覽器來決定。

上下標不會改變元素文字的尺寸大小。

8. 長度值和百分比

和上下標相似，長度值和百分比值可以使元素的基線相對於基準元素的基線升高（正值）或者下降（負值）。

 

上下標的移動尺寸是由瀏覽器肯定的，而設定長度值或者百分比，能夠精確控制文字上下移動的幅度。

百分比與行高有關（line-height），例若有以下代碼，其顯示如圖7-44所示。

 

個人測試  @FireFox下

測試代碼：

<style type="text/css">
p {vertical-align:baseline; font-size:20px; line-height:60px; background-color:yellow;}
span {background-color: red;}
u {background-color: blue;}
del {background-color: pink;}
</style>

//HTML代碼
<p><span>Ajax測試</span><u>Ajax測試</u><del>Ajax測試</del>Ajax測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試</p>

默認狀況：  

 
其餘說明：
一、SPAN、U、DEL標籤的 offsetWidth = SUM（ 字符 * font-size * 修正係數）（這裏，中文的修正係數爲1，數字的修正係數0.6，英文字符修正係數差別很大，好比ijl很小，wmk等比較大，大寫英文一樣修正係數不統一）。

二、SPAN、U、DEL標籤的 offsetHeight。
   推論：inline元素的背景渲染區域即內容區域大小，直接受到font-size的影響。
         對<p>塊級元素，塊級元素的計算值高度由包含的行框高度累加而成，所以這裏height爲60px；

三、把 span.style.lineHeight 設置爲 15px(從10px變化到60px) ----> 發現沒有變化
   推斷：內容區大小不受line-height影響，line-height用於處理相鄰文本行基線間的距離。

四、把 span.style.lineHeight 設置爲 70px(從61px變化到80px) ---->行框高度開始隨着設置調整
   推斷：行框高度是行內最高的行內框高度，經過line-height調整。
         p元素的height計算值爲 span.style.lineHeight值，不禁p.style.lineHeight控制。
   推斷二：不設定height屬性的<p>的height計算值爲行框高度累加值。         

場景4：line-height功能測試

 
五、把 span.style.verticalAlign= sub；del.style.verticalAlign= super；-->看圖說話
   推斷：增長了行框的高度，上下標基於基線進行移動。

 場景5：sub、super垂直居中效果的研究

 

六、全部對齊方式的確認：
    一、首先確認該行內的基準元素，取line-height值爲最大值的元素做爲基準；
    二、其餘文本向基準元素對齊，依據line-height和vertical-align來實現效果；
    三、sub、super是改變基線的方式，所以會對行框的最終高度產生影響；
    四、top、bottom是行內框對齊，top指該元素行內框的頂端與基準行內框頂端對齊；
    五、text-top、text-bottom一樣會影響最終行框的高度，是指該元素行內框的頂端與基準元素的內容區頂端對齊（當line-height=內容區高度時，跟基準內容區域頂端對齊。line-height小於內容區域高度時，會出現文本繼續上移的現象，line-height設置爲0px時，正好是內容區域的垂直中部跟基準內容區域頂端對齊。）

    六、百分數和長度值：基於基線進行移動，百分數的計算值爲行高*百分數。

    七、關於middle，感受是根據一條基準線進行對稱拓展，但基準線產生的規則不清楚。

 

轉載連接：http://sojuker.blog.163.com/blog/static/1387908792012760243916/