作者：心葉
時間：2018-04-28 09:23
第一步：行內盒子模型。
為什麼明明說的是垂直對齊方式，開始卻要說盒子模型，還是行內盒子模型，因為垂直對齊方式控制的物件就是這個模型，因此我們先了解一下控制的環境，再看如何控制。
關於盒子模型相關的東西，我們會單獨去仔細說明，因為非常重要，這裡只是給出簡單的說明，包括下面的行高等一樣：
內容區域（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底邊緣。