Box Model - css 框框模型 [2*]

思考 - Box Model 與 css 版面視覺設計

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 box 因 inline 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-height 或 vertical-align 的定義來決定。

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

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

例如 xhtml

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

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