在css中，基線“base line”并不是漢字文字的下端沿，而是英文字母的下端沿?；€總是與行內(nèi)高度最高的元素一致，并且基線是隨著行內(nèi)最高元素變化的。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

一、基本概念

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

注意：基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿。

2、內(nèi)容區(qū)

內(nèi)容區(qū)是指底線和頂線包裹的區(qū)域（行內(nèi)元素display:inline;可以通過background-color屬性顯示出來），實(shí)際中不一定看得到，但確實(shí)存在。內(nèi)容區(qū)的大小依據(jù)font-size的值和字?jǐn)?shù)進(jìn)行變化。

3、行距、行高

行高（line-height）：包括內(nèi)容區(qū)與以內(nèi)容區(qū)為基礎(chǔ)對(duì)稱拓展的空白區(qū)域，我們稱之為行高。一般情況下，也可以認(rèn)為是相鄰文本行基線間的距離。

行距：指相鄰文本間上一個(gè)文本行基線和下一個(gè)文本行頂線之間的距離。當(dāng)然，我更愿意認(rèn)為是（上文本行行高-內(nèi)容區(qū)高度）/2+（下文本行行高-內(nèi)容區(qū)高度）/2。

4、行內(nèi)框

行內(nèi)框是一個(gè)瀏覽器渲染模型中的概念，無法顯示出來，但是它又確實(shí)存在，它的高度就是行高指定的高度。

5、行框

行框（line box），同行內(nèi)框類似的概念，行框是指本行的一個(gè)虛擬的矩形框，也是瀏覽器渲染模式中的一個(gè)概念。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊，最終計(jì)算行框的高度）

二、vertical-align：設(shè)置元素的垂直對(duì)齊方式。

??行高與單行純文字的垂直居中（line-height），而如果行內(nèi)含有圖片和文字，在瀏覽器渲染出來后，讀者可以發(fā)現(xiàn)文字和圖片在垂直方向并不是沿中線居中，而是沿基線對(duì)齊。這是因?yàn)椋啬J(rèn)的垂直對(duì)齊方式為基線對(duì)齊（vertical-align：baseline）。

CSS語法：vertical-align

??語法：

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

??說明：

????設(shè)置元素內(nèi)容的垂直對(duì)齊方式。

??參數(shù)：

????baseline： 基線對(duì)齊；

????sub： 下標(biāo)顯示；

????super： 上標(biāo)顯示；

????top： 頂端對(duì)齊；

????text-top： 文本的頂端對(duì)齊；

????middle： 中部對(duì)齊； //沒有研究透的屬性

????bottom： 底端對(duì)齊；

????text-bottom： 文本的底端對(duì)齊；

????百分比和長度： CSS2，可為負(fù)數(shù)。

??初始值：baseline

??繼承性：不繼承

??此處需要特別注意的是：垂直對(duì)齊屬性只對(duì)文本有效（是指包含了#Text節(jié)點(diǎn)的元素節(jié)點(diǎn)才能正確地處理vertical-align屬性）。同時(shí)，該屬性不能繼承。

屬性值詳解

??在上面一節(jié)中，介紹了文本的基線、頂線、中線和底線，還有內(nèi)容區(qū)、行內(nèi)框和行框，而本節(jié)的垂直對(duì)齊和這幾個(gè)概念密切相關(guān)。

1、基線對(duì)齊（vertical-align：baseline）

基線對(duì)齊（vertical-align：baseline）使元素的基線同基準(zhǔn)元素（取行高最高的作為基準(zhǔn)）的基線對(duì)齊

2、頂端對(duì)齊（vertical-align：top）

頂端對(duì)齊（vertical-align : top）是將元素的行內(nèi)框的頂端與行框的頂端對(duì)齊

3、文本頂端對(duì)齊（vertical-align : text-top）

文本頂端對(duì)齊（vertical-align : text-top）是將元素行內(nèi)框的頂端同文本行的頂線對(duì)齊

4、底端對(duì)齊（vertical-align : bottom）

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

5、文本底端對(duì)齊（vertical-align : text-bottom）

6、中間對(duì)齊（vertical-align : middle）

中間對(duì)齊（vertical-align : middle）通常使用在圖片上，將圖片的垂直方向的中線與文本行的中線對(duì)齊。（對(duì)于文字的處理有些偏差，具體依據(jù)還沒有研究出來，有研究的同學(xué)可以聯(lián)系我哦~~）

??中線的定義為：中線位于基線的上方，與基線的距離為小寫字母x高度的一半（即0.5ex），而ex同font-size相關(guān)，大部分瀏覽器認(rèn)為1ex = 0.5em（em同樣也是相對(duì)單位，不是絕對(duì)單位），因此會(huì)將基線以上四分之一em處作為中線來對(duì)齊。

7、上標(biāo)和下標(biāo)

??上標(biāo)（vertical-align:super）使元素的基線相對(duì)于基準(zhǔn)元素的基線升高，下標(biāo)（vertical-align:sub）使元素的基線降低，移動(dòng)的幅度CSS規(guī)范中沒有規(guī)定，由瀏覽器來決定。

上下標(biāo)不會(huì)改變元素文字的尺寸大小。

8、長度值和百分比

和上下標(biāo)類似，長度值和百分比值可使元素的基線相對(duì)于基準(zhǔn)元素的基線升高（正值）或者降低（負(fù)值）。

上下標(biāo)的移動(dòng)尺寸是由瀏覽器確定的，而設(shè)定長度值或者百分比，可以精確控制文字上下移動(dòng)的幅度。

百分比與行高有關(guān)（line-height），例如有如下代碼，其顯示如下圖所示。

我的測試 @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>

默認(rèn)情況：

其他說明：

??1. SPAN、U、DEL標(biāo)簽的 offsetWidth = SUM（ 字符 * font-size * 修正系數(shù)）（這里，中文的修正系數(shù)為1，數(shù)字的修正系數(shù)0.6，英文字符修正系數(shù)差異很大，比如ijl很小，wmk等比較大，大寫英文同樣修正系數(shù)不統(tǒng)一）。

??2. SPAN、U、DEL標(biāo)簽的 offsetHeight。

??推論：inline元素的背景渲染區(qū)域即內(nèi)容區(qū)域大小，直接受到font-size的影響。

??對(duì)<p>塊級(jí)元素，塊級(jí)元素的計(jì)算值高度由包含的行框高度累加而成，因此這里height為60px；

??3. 把 span.style.lineHeight 設(shè)置為 15px(從10px變化到60px) —-> 發(fā)現(xiàn)沒有變化

??推論：內(nèi)容區(qū)大小不受line-height影響，line-height用于處理相鄰文本行基線間的距離。

??4. 把 span.style.lineHeight 設(shè)置為 70px(從61px變化到80px) —->行框高度開始隨著設(shè)置調(diào)整

??推論一：行框高度是行內(nèi)最高的行內(nèi)框高度，通過line-height調(diào)整。

??????p元素的height計(jì)算值為 span.style.lineHeight值，不由p.style.lineHeight控制。

??推論二：不設(shè)定height屬性的<p>的height計(jì)算值為行框高度累加值。

??5. 把 span.style.verticalAlign= sub；del.style.verticalAlign= super；–>看圖說話

??推論：增加了行框的高度，上下標(biāo)基于基線進(jìn)行移動(dòng)。

??6. 所有對(duì)齊方式的確認(rèn)：

????a）首先確認(rèn)該行內(nèi)的基準(zhǔn)元素，取line-height值為最大值的元素作為基準(zhǔn)；

????b）其他文本向基準(zhǔn)元素對(duì)齊，依據(jù)line-height和vertical-align來實(shí)現(xiàn)效果；

????c）sub、super是改變基線的方式，因此會(huì)對(duì)行框的最終高度產(chǎn)生影響；

????d）top、bottom是行內(nèi)框?qū)R，top指該元素行內(nèi)框的頂端與基準(zhǔn)行內(nèi)框頂端對(duì)齊；

????e）text-top、text-bottom同樣會(huì)影響最終行框的高度，是指該元素行內(nèi)框的頂端與基準(zhǔn)元素的內(nèi)容區(qū)頂端對(duì)齊（當(dāng)line-height=內(nèi)容區(qū)高度時(shí)，跟基準(zhǔn)內(nèi)容區(qū)域頂端對(duì)齊。line-height小于內(nèi)容區(qū)域高度時(shí)，會(huì)出現(xiàn)文本繼續(xù)上移的現(xiàn)象，line-height設(shè)置為0px時(shí)，正好是內(nèi)容區(qū)域的垂直中部跟基準(zhǔn)內(nèi)容區(qū)域頂端對(duì)齊。）

????f） 百分?jǐn)?shù)和長度值：基于基線進(jìn)行移動(dòng)，百分?jǐn)?shù)的計(jì)算值為行高*百分?jǐn)?shù)。

????g）關(guān)于middle，感覺是根據(jù)一條基準(zhǔn)線進(jìn)行對(duì)稱拓展，但基準(zhǔn)線產(chǎn)生的規(guī)則不清楚。

推薦學(xué)習(xí)：css視頻教程