Box Model (框框模型) 是什麼?

請參閱👉新版解說。包含 3D 動畫展示。

  • 說明:css box model 描述出文件中,元素 (elements) 所形成的最基本矩形區域 (boxes) 及專有名詞;此為呈現視覺性 (visual) 版面的重要基礎。
  • 適合:有 htmlcss 語法基礎概念者。
  • 難度:等級2
  • 更新:
 

只要有東西在版面上描繪 (可以把版面想成一張空白的紙) ,就一定會佔有版面上某些空間,縱使是一個字,也至少就佔了一個字的矩形區域,而這樣的區域被定義為「」 (boxes) 。

文件內某「一個」元素的「框」 (box) 可由四個層疊的 (nested) 區域所組成:該元素所包含的「內容」 (不論是單純的文字,或是其它元素) 形成最內層的區域,就是 content area (內容區) ,依序向外一層一層圍繞為 padding area, border area, margin area (補距區 - 邊線區 - 邊距區) 。

區與區之間可分別由 css 指定 padding, border, margin 特性 (property) 來改變相互的距離,而每種特性定義都有上下左右四向,可由版面設計者指定各不相同的距離 (說成是厚度、寬度也可以) ,當然也可以沒有距離,運用這樣的概念進而改變版面上整組 box 的尺寸及呈現。

由內向外四個區都各自有「四邊」形成緊鄰的框,標準的名稱依序為:

content edge or inner edge (內緣-圖中綠線)
具有寬 (width) 及高 (height) 的 content area 四邊,與 padding area 交界處;四邊圍成的區域稱為 content box
padding edge (補距外緣-圖中紅線)
padding area 四邊,與 border area 交界處;四邊圍成的區域稱為 padding box
border edge (邊線外緣-圖中藍線)
border area 四邊,與 margin area 交界處;四邊圍成的區域稱為 border box
margin edge or outer edge (框外緣-圖中深灰線)
margin area 四邊,也是整個框 (box) 的最外緣;四邊圍成的區域稱為 margin box

margin box 來說,永遠呈現透明 (因此能看到其背後的內容);在元素上定義背景 (background) 呈現在 border box, padding box, 及 content box 的區域內。而 content box 的「內容」當然是呈現在背景的前面。

思考 - Box Modelcss 版面視覺設計

Box 在版面編排上可以說是無所不在,就算「內容」 (content) 是單單一個字都具有 box,佔有一小塊矩形區域;當然,也能由 css 個別指定不同的 padding, border, margin。如果 padding, border, margin 的距離都是「零」,那麼當然, padding box, border box, margin box 的大小就會與 content box 所擁有的寬高一樣。

 

許許多多字的 Box 就如同「堆積木」,一個個相鄰著由上而下堆疊起來 (書寫方向為由左向右、由上至下時),將內容有規則地分布在版面上,而這個規則就是設計者以 css 定義的呈現方式。

行內層級 (inline-level) 與區塊層級 (block-level) 呈現模式不同

許多的「字」結合起來可以產生「段落」,段落則再形成更大的矩形 box ,將文字圍繞起來。

例如 xhtml
<p>
看到竹子想到王陽明。看到桃花想到桃花源記。看到蓮花想到周敦頤。<em>看到荷花想到何仙姑。看到玫瑰想到愛神。看到菊花想到陶淵明。</em>看到百合想到香水。~節錄自 monica 「聯想的遊戲」
</p>

元素 p 代表段落,一般以區塊層級 (block-level) 方式呈現,會是一個「獨立」的矩形 box ,可特別稱為 block boxes (圖中綠線) 。而 p 所包含的「內容」 (content) 可想像成,由「三節」行內層級 (inline-level) 或文字層級 (text-level) 的文字組成,三個行內層級元素 (inline-level emements) 當然都有自己的 box ,可特別稱為 inline boxes ,以一個個「自動緊接」的方式呈現,與 block boxes 圍成「一區」的矩形不盡相同。

  1. 看到竹子想到王陽明。看到桃花想到桃花源記。看到蓮花想到周敦頤。
  2. <em>看到荷花想到何仙姑。看到玫瑰想到愛神。看到菊花想到陶淵明。</em>
  3. 看到百合想到香水。~節錄自 monica 「聯想的遊戲」
 

1 與 3 只是文字,屬於文字層級 (text-level) 元素,雖然有「自然產生」的 inline boxes ,不過由於沒有賦予特定的元素名稱,也可稱為「不具名 (anonymous) 元素」,所以無法經由 css selectors 為其指定 padding, border, margin 等;而 2 因為已被指定成 em 元素 (行內層級元素) ,就可以由設計者定義。

行內層級元素無法容納在一行內時, inline boxes 就會拆斷成二行或是數行,範例中的 em 元素就可能拆成二行或是三行的矩形框 (圖中藍線),不再是標準的一塊矩形而已了。 inline boxes 的「左邊」在該元素第一行起始的左方,「右邊」在最末行結尾的右方,所以如果指定「左或右」的 padding, border, margin 時,只會在第一行和最末行作用,不會在各分行的「拆斷處」產生;指定「上或下」會在各行產生 (當然,依據 margin 規則,定義「上或下」不會作用在「不可替換」行內元素 (non-replaced inline elements)) 。

抽象的 line boxinline boxes 而產生

line box 像是抽屜,也像骨架一般,將行內元素分成一層一層「收納」,如前例 (圖中紅線),一層放不下就會轉到下一層。通常會看到行與行之間其實會有些許的空隙,不只是「字」的高度而已,這就是 line box 這個抽屜的高度,並不是 inline box 的高度。所以,實際上 inline boxes 是存在於一行一行抽象的 line box 裡,而 line box 一行行疊成區塊層級元素 (如前例的 p) 。 line box 由上向下,一行緊鄰著一行,而且永遠不會相互重疊。

line box 與前面所講的 box 不同, line box 是因行內元素所產生的抽象空間,只是區塊層級元素 (block-level elements) 的 box model 一部分而已,不是真實的元素,所以也不可能為其指定 box 的各項數值 (如 width, height, padding, border, margin 等) 。 line box 的寬度根據其容納區 (containing block) 所決定,而高度則由 css line-heightvertical-align 的定義來決定。

多重的 block boxes 像洋葱一層包著一層

實際上,每一個區塊層級元素 (block-level elements) ,必然會由另一個區塊層級元素包圍,根元素除外 (root element, html 文件指的就是 html 元素) ,所以,許多個 block boxes 一層一層包圍起來時就好似洋葱的構造。

例如 xhtml
<blockquote>
<h1>聯想的遊戲</h1>
<p>看到三國演義想到七俠五義。看到紅樓夢想到牡丹亭。看到山海經想到鏡花緣。看到芭蕉扇想到鐵扇公主。看到豬八戒想到沙悟淨。看到孫悟空想到如來佛。看到史記想到司馬遷。看到船想到孔明借箭。看到滿山秋色想到最愛的詩人王維。看到赤子純真一般的畫想到豐子愷。看到李叔同想到大護法夏丏尊。~節錄自 monica 「聯想的遊戲」</p>
</blockquote>
 

很明顯地, h1, p, blockquote 都是區塊層級元素h1p 的「內容」 (content) 僅包含著行內層級的元素,就像前面一樣,兩者各自擁有矩形的 block box ,也都可以各自指定 padding, border, margin (圖中紅線) 。而 blockquote 從外包圍著 h1ph1p 成了 blockquote 的「內容」 (content) ; blockquote 形成另一個 block box (圖中綠線) ,當然也可以指定 box 的各項數值。

參考資源
散佈、展示請參閱 Creative Commons 授權條文,禁止重混,引述請增加原文連結。
文章標籤

不老師 發表在 痞客邦 留言(3) 人氣()