基本概念：
塊：block 特點獨行
內聯：inline
內聯塊：inline-block

如果元素display屬性預設值為block，則為塊元素。如div p
如果元素display屬性預設值為inline或inline-block，則為內聯元素。如span img
（通常所說的內聯指，內聯和內聯塊）

字格：所有的文字都放在1個矩形中，為了方便區分，稱這個矩形為字格。
字格4線中垂點（對齊用的）：基線（字母x底部切線），中線（字母x底部向上1/2個字母x高度，在中垂點下面一點點），頂線，底線。
中垂點：字格垂直方向中點。
圖片（對齊用的）：頂部，底部，中垂點。
行高：2行字母基線間距。（字面意思，但實際作用不只如此）
行內框(inline-box)：包裹一個元素的區域，我們只關注它的高度
行框(line-box)：包裹一行的區域，我們只關注它的高度、內部元素的對齊。

1.父字格---用來對齊的參考字格，由父容器的字型決定。
所有的內聯元素，先跟父字格對齊。父字格不會顯示的，它只是用來對齊的。
2.預設對齊---基線對齊
不同大小的文字的基線和圖片等內聯塊（inline-block）的底部和父字格的基線對齊。
3.對齊框
取文字等字格中垂點和圖片等內聯塊（inline-block）的頂部和底部中最高和最低點為對齊的上下邊界。
內聯文字對齊框高度：各個不同大小字格中垂點相對於對齊上邊界的距離。
圖片對齊框高度：圖片底部和對齊上邊界的距離。
4.行高
1.line-height可以繼承，單獨作用於內部的不同大小文字和父字格。
2.沒有單獨設定，也沒有繼承值，則使用預設值0。
3.隻影響文字（內聯、內聯塊、塊）
5.行框高度
行框高度==最高的行內框高度

1)最高行內框：
1.內聯文字行內框高度：內聯字格對齊框高度+line-height（不同字格包括父字格大小相同或不同行內框不一樣的）
2.圖片行內框高度：圖片對齊框高度
3.內聯塊文字行內框高度：

2)---<非常重要>---<最高行內框，行高努力對齊原則>---
讓最高行內框元素的中垂點儘可能靠近行框的中垂點。

1.該元素中垂點在對齊框上半部分，說明元素偏上，line-height先擴充套件上邊界，上下相等時，同時擴充套件。
2.該元素中垂點在對齊框下半部分，說明元素偏下，line-height先擴充套件下邊界，上下相等時，同時擴充套件。
這樣元素的中垂點就儘可能的靠近行框的中垂點。

6.主元素：
把最高行內框的元素稱為主元素，該元素直接決定行框高度。
元素總高度=對齊高度+line-height;//---最重要---//
元素總高度=對齊高度+line-height;//---最重要---//
元素總高度=對齊高度+line-height;//---最重要---//
案例：
line-height=50px,子字格font-size=40px,父字格font-size=0
現象：子字格沒有居中
原因：父字格字型小，對齊高度高，line-height都為50px,所以父字格成為主元素，行高努力對齊主元素。
7.多種內聯文字對齊關鍵：消除對齊高度。//非常重要
8.top,bottom的研究：要使用img元素參考，並將該對齊方式的內聯元素，先讓line-height=0，再逐漸增加，看變化。

案例：
<div>
x <span>x</span>
</div>

驗證1：對齊框存在
改變span的font-size，檢視框的變化
div{
font-size: 50px;
border: 1px solid #333;
line-height: 0;
}
span{
font-size: 50px;
}

驗證2：元素最高行內框=元素對齊框高度+line-height
不斷增加span的line-height，超過某個臨界點（仍小於div的line-heigth:100px），行框就會變化。
div{
font-size: 50px;
border: 1px solid #333;
line-height: 100px;
}
span{
font-size: 10px;
line-height: 0px;
}