平常只知道到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大小相關。一般選擇文本後,有背景顏色的就是內容區了。如下圖: