vertical-align:垂直對齊方式相關說明

第一步：行內盒子模型。

爲何明明說的是垂直對齊方式，開始卻要說盒子模型，仍是行內盒子模型，由於垂直對齊方式控制的對象就是這個模型，所以咱們先了解一下控制的環境，再看如何控制。

關於盒子模型相關的東西，咱們會單獨去仔細說明，由於很是重要，這裏只是給出簡單的說明，包括下面的行高等同樣：

內容區域（content area）：一種圍繞着文字看不見的盒子，大小和font-size有關。

內聯盒子（inline boxes）：很差表達，舉例子解釋一下，被inline水平標籤（em、a和span等）包含的稱爲"內聯盒子"，若是是光禿禿的文字就稱爲"匿名內聯盒子"。

行框盒子（line boxes）：一行就是一個行框盒子，裏面由一個個內聯盒子組成，應該不是太難理解。

包含盒子（containing box）：由一行行的行框盒子組成，好比<p>單純的文字被inline水平標籤包含的文字</p>。

行內盒子模型佈局有一個問題，隨便提一下：在使用display:inline-block使元素位於一行時元素之間有間隙是因爲一些好比換行符等空白字符致使的（解決方法是對外殼設置font-size:0px，裏面小格子再恢復font-size爲須要的值，固然別的方法也有，好比標籤所有一行，不要換行，不過這個感受好用些）。

還有一個技巧，對於想總體居中，內部左對齊的佈局，爲了最後一行不足一行的時候不會突兀的居中，能夠添加幾行和內容元素同樣寬，高爲零的行內元素，很是好用。

此外，還有幾個經常使用的屬性，列舉一下：

white-space：屬性設置如何處理元素內的空白，好比是否換行等。

第二步：行高。

爲何行高也是要提早說明一下，由於垂直對齊是在一行中進行的，行高表明的是實際高，有必要了解一下，幫助去尋找對齊線條。

行高定義的是二行文字基線（baseline）的距離（不必定準確，更嚴格說應該是行框盒子的實際高度，不是高度），內容區域（content area）高度+行間距(vertical spacing)=行高，行高因爲繼承，無處不在，包括單行文本也不例外；其次，高度的表現不是行高而是內容區域高度+行間距，並且內容區域高度只與字號和字體有關，和行高沒有任何關係。

簡單的說就是：行高決定了內聯盒子高度，行間距可大可小、可正可負，始終保證行高等於高。

內容區域高度不必定是font-size，還取決於字體，不一樣字體不同，在simsum下兩者是同樣的。

line-height取值數字時全部可繼承根據font-size從新計算，而取百分百和em時，當前元素根據font-size計算以後把計算的結果繼承給下面元素，區別有點大。

替換元素比較特別，通常有內在尺寸和寬高比，不能夠簡單的去理解，遇到要當心，後期關於該元素會專門去討論。

第三步：正文。

垂直對齊方式是用來設置垂直對齊方式，全部垂直對齊的元素都會影響行高，修改的是本身的什麼線垂直對齊父元素的什麼線，好比默認本身的基線對齊父元素的基線；若是取值百分百，計算是相對行高計算的。

根據前置知識你應該能夠猜到，其是一個inline-block、table-cell（好比td元素）或inline依賴型元素。

若是設置爲數值，百分百或em等單位，表示的是在默認基礎上偏移的對齊。

第四步：注意點。

inline-block的基線是正常流中最後一個line box的基線，除非，這個line box裏面既沒有line boxes或者自己overflow屬性的計算值而不是visible，這種狀況下基線是margin底邊緣。