平常只知道到CSS的盒模型，即Block Box。最近有使用到CSS的 line-height 和 vertical-align 這兩個屬性，但使用起來特別的不順利，所以就仔細的學習了，這才知道這其中有一部分原因是因爲有一個時常接觸到，但我並不知道的東西在作怪。就是Line Box 及其相關的一些 Box。我就把它們給總結了下。
在Line Box的相關概念中有，有4種Box。即 containing box、line boxes、inline boxes、content area。下面我們來看段簡單的代碼，通過它們來分別來說說這4種box。
<div>
你好，這是一段測試代碼，
<span>我用這段代碼</span>
<b>來展示</b>
line boxes 相關的 4種 boxes。
</div>
這段代碼的效果如下：
這麼看起來就是一段普通的文本，但這種段代碼中就藏種那4種box。下面聽我細細講來。
包含框（containing box）
每一個block都算containing box，它包含 line boxes，line boxes的高度垂直堆疊形成了 containing box的高度，如例中div的高度。
行框（line boxes）
塊內的內容渲染的每一行，都可以看成是一個行框，也可以說，每一行都是一個行框。如下：
line boxes的行數，由block的寬度及內容決定，當然是在不限制高度的情況下。
一行內有多個行內框，一個一個的inline boxes組成了line boxes，行框是包含一行內行內框最高點和最低點。
它的高度，由行內最大line-height決定。
行內框（inline boxes）
inline boxes不會讓內容成塊顯示，而是排成一行。inline boxes一般有兩種，
匿名文本（匿名 inline boxes）：在塊元素（無論是 block 或 inline-block）中沒有被 內聯元素（即 inline 元素）包含的文本，都爲匿名文本。即匿名 inline boxes。
而內聯/行內元素也是一個 inline boxes。如下圖（有4個 inline boxes）：
行內容區（content area）
content area 是一種圍繞文字看不見的box。content area的大小與font-size大小相關。一般選擇文本後，有背景顏色的就是內容區了。如下圖：
