盒模型/行內框盒子模型及line-height/vertal-align取值分析

盒模型

盒模型之因此稱爲「盒」是由於在一個頁面佈局中，文檔中的每個元素（塊級元素）均呈現爲一個矩形的「盒子」，這個「盒子」包含：內容（content） + 內邊距（padding） + 邊框（border） + 外邊距（padding），如圖：

圖引自"https://developer.mozilla.org..."

盒模型又分爲標準盒子模型和IE盒子模型。標準盒模型下，設置box的width的值後，這個值僅包含content的寬高，而在IE盒模型下，這個值是content + padding + border 後的寬高。例：

.test1{
    width: 200px;
    height: 200px;
    padding: 50px;
    border: 10px dotted red;
}

• 標準盒模型下，test1佔據的實際寬爲： border-left-width + padding-left + width +
  padding-right + border-right-width = 320px; 實際高度同理。

• 而在IE盒模型下，test1佔據的實際寬爲 200px; 而content部分的實際寬度爲： width -
  border-left-width - padding-left - padding-right - border-right-width = 80px; content部分實際高度同理。

IE6+ 的瀏覽器默認採用的均爲標準盒模型，隨着ie6-的淘汰，標準/IE盒模型問題已經再也不成爲問題。

在實際開發過程當中，寬度爲百分比時經常由於1px的border使得寬度不可控，此時能夠使用box-sizing: border-box; 來對特定元素應用IE盒模型，從而使得border和padding值被包含在設置的寬高內。

行內框盒子模型（line-boxes）

對於上文的盒模型的解釋中，加了一個限制是指塊級元素，對於行內元素，在頁面佈局結構中，一樣會呈現爲一個矩形的盒子，可是這個盒子是沒法定義寬度和高度，行內元素的這個盒子咱們能夠成爲行內框盒子，行內框盒子的寬度和高度分別是緊貼着行內元素四周的寬和高。例如：

圖中文字白色區域就是行內框盒子，白色區域的寬和高就是行內框盒子的寬和高，這裏設置的文字大小爲60px; 7個字，所以行內框盒子的寬高即爲 420 X 60 ;

在說到行內框盒子時，一般會提起幾個屬性，line-height和vertal-align。

Line-height

line-height的意義在於指定行內框盒子的高度，對於塊級元素，line-height指定的是塊級元素內部line-boxes的最小高度，對於非替代行內元素，line-height用於計算行內框盒子的高度，對於替代行內元素，line-height多數時間是沒有影響的。
line-height的取值能夠爲 具體值/數字/百分比。

• 具體值：這個沒有疑問，設置多少就是多少，不過通常不推薦。

• 數字：實際的line-height的值爲 當前字體 * 數字 ，好比font-size: 60px; line-height: 1.5;
  等同於line-height: 90px;

• 百分比：計算方式和數字是同樣的，好比font-size: 60px; line-height: 150%; 等同於line-height:
  90px;

line-height具備繼承性，不過數字和百分比的繼承方式是不同的，數字是繼承的數字值，而後子元素再拿當前font-size 數字，而百分比是依父元素的font-size 百分比，計算後把結果的帶單位的具體值繼承下去。例：

數字：
   父元素：`.test1{font-size: 20px; line-height: 1.5;}`
   子元素：`.test2{font-size: 60px;}`

父元素實際line-height爲 1.5 * 20 px 即30px;
子元素實際line-height之繼承父元素計算前的值，1.5，所以子元素實際line-height爲 1.5 * 60 px 即90px;

百分比：
    父元素：`.test1{font-size: 20px; line-height: 150%;}`
    子元素：`.test2{font-size: 60px;}`

父元素實際line-height爲 150% * 20 px 即30px;
子元素實際line-height直接繼承父元素計算後的結果，即30px;
瀏覽器默認的line-height值爲normal，W3C解釋爲 設置合理的行間距；MDN解釋爲取決於用戶代理和元素的font-family，通常一般默認爲1.2左右。在上圖的例子中，在chrome下采用的是楷體，line-height測算爲1.14。在最上面的圖中，咱們未設置line-height的值，可是能夠看獲得文字上邊緣後是有一條縫隙的，這就是所謂的合理的行間距的結果。
然而，實際上，行內框盒子模型的高度和line-height沒有關係，而且在上圖中咱們也能夠發現，行內框盒子在佈局中佔據的高度其實是有line-height決定的，當line-height爲0時，這個行框盒子就再也不佔用頁面佈局的位置了，除了層級關係的相互遮蓋，這個行內框盒子就不會影響其餘元素的佈局了，事實是這樣的嗎。例：

事實上咱們發現，紅色的test2，上邊緣的其實位置並非父級(0,0)的位置，也就是說，咱們的行框盒子實際仍是佔據了一部分位置，這個其實和vertal-align有關的。

Tips：
   替代行內元素指的是值根據元素的不一樣屬性來決定元素的具體顯示內容，好比input type="text/button/file"等，其餘的如：object/video/textarea/img等，某些狀況下canvas和audio也多是替換元素。

Vertal-align

vertal-align是用來指定行內元素（inline）或表格單元格（table-cell）元素的垂直對齊方式。vertal-align的取值有主要有：baseline/top/middle/bottom/sub/super/text-top/text-bottom/百分比/具體值。先來了解一下各個值對應的位置。

• baseline: 默認值，自身的baseline和父級盒子的baseline對齊，若是沒有自身baseline（好比img），則外邊距底部邊緣和父級的baseline對齊；

• middle: 自身垂直中點對齊 父級baseline + x 高度的一半 的位置；

• 百分比: 在baseline的基礎上，向上（百分比爲正）或者向下（百分比爲負）偏移 line-height * 百分比 的值；

• 具體值：在baseline的基礎上，向上（值爲正）或者向下（值爲負）偏移 這個值的距離；

top和bottom是兩個比較特殊的取值，使元素與行框盒子的邊界對齊而不是參考基線。

• top: 對齊所處行內框盒子的頂部；

• bottom: 對齊所處行內框盒子的底部。