CSS中的Line Box

       平常只知道到CSS的盒模型,即Block Box。最近有使用到CSS的 line-height 和 vertical-align 這兩個屬性,但使用起來特別的不順利,所以就仔細的學習了,這才知道這其中有一部分原因是因爲有一個時常接觸到,但我並不知道的東西在作怪。就是Line Box 及其相關的一些 Box。我就把它們給總結了下。

       在Line Box的相關概念中有,有4種Box。即 containing boxline boxesinline boxescontent 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大小相關。一般選擇文本後,有背景顏色的就是內容區了。如下圖:

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章