Box 型號

CSS Podcast - 001: The Box Model

假設您有以下一小段 HTML 程式碼：

<p>I am a paragraph of text that has a few words in it.</p>

然後為這個 CSS 編寫：

p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}

內容展開後，寬度為 142 像素，而非您指定的 100 像素，並會拆分至元素中。為什麼會這樣？

盒子模型是 CSS 的核心基礎。瞭解 Box 模型的運作方式、會受到 CSS 其他層面的影響，以及控管能力的一大重點，有助於編寫更容易預測的 CSS。

請務必記住，CSS 顯示的所有內容都是方框，就算只是文字，或具有 border-radius 看起來像圓形的 border-radius。

內容和大小

根據方塊的 display 值、設定維度和包含的內容，方塊的行為會有所不同。這類內容可以是純文字，或由子元素產生的更多方塊。不論是哪一種方式，內容都會預設影響方塊的大小。

您可以使用極端尺寸控制這項設定，也可以使用內建尺寸功能，讓瀏覽器根據內容大小來決定。

以下是基本示範，說明其中的差異：

示範的方塊內有一個固定尺寸且邊框粗細的方塊，其中顯示「CSS 太棒了」一詞。由於方塊有指定的寬度，因此其大小。這表示可控管其子項內容的大小。不過，「awesome」這個字是無法容納的，因此會溢位至上層方塊的邊框外 (詳情請參閱稍後說明)。如要避免此溢位情況，其中一種方法是選擇不設定寬度 (不設定寬度)，還是將 width 設為 min-content。min-content 關鍵字會指示方塊內容的寬度取決於內容內建的最小寬度 (「超棒」)。讓方塊完美貼合文字。

以下是更複雜的範例，顯示不同尺寸對實際內容的影響：

開啟或關閉內建函式尺寸，看看外對尺寸如何藉由極限尺寸和內建函式調整功能，進一步控制內容。如要查看這類效果，請在資訊卡中新增幾句文字。如果這個元素尺寸過大，在溢位前可以新增的內容數量有限，但啟用內建尺寸大小功能時，就不會發生這種情況。

根據預設，這個元素設有一組 width 和 height 的 400px。 這些維度會為元素中的所有內容設定嚴格邊界，除非內容過大，不侷限於方塊內。如要查看實際操作，請將花朵圖片下方的說明文字變更為超過方塊高度的內容。

重要詞彙：如果內容過大，無法容納這類內容，就會發生溢位現象。您可以使用 overflow 屬性，管理元素處理溢位內容的方式。

只要切換至內建大小調整功能，瀏覽器即可根據方塊的內容大小做出決定。這樣會大幅降低溢位現象，因為該方塊會隨內容調整大小。

請務必記住，內建尺寸是瀏覽器的預設行為，而且通常比螢幕尺寸更加靈活。

盒子模型的面積

這些盒子是由各自負責特定工作的盒式模型區域所組成。

內容方塊是指內容所在的區域。內容可以控制其父項的大小，因此通常是變化最大的區域。

邊框間距方塊會圍繞內容方塊，也是 padding 屬性建立的空間。由於邊框間距位於方塊中，因此該方塊的背景會顯示在它建立的空間中。如果方塊已設定溢位規則 (例如 overflow: auto 或 overflow: scroll)，捲軸也會佔用這個空間。

邊框方塊會圍繞邊框間距方塊，其空間則由 border 值定義，該值會建立元素的視覺框架。元素的「框線邊緣」就是您看到的內容限制，

最後區域「邊界方塊」就是方塊周圍的空間，由方塊的 margin 規則定義。outline 和 box-shadow 等屬性也會佔用這個空間，因為這些項目已繪製在元素上方，不會影響方塊大小。在方塊中變更方塊的 200px outline-width，並不會變更邊框邊緣中的任何內容。

一個實用的比喻

盒子模型難以理解，因此以下舉例說明您目前學到的內容。

在本圖表中，有三個相鄰的相框掛在牆上。頁框圖片的元素與盒子模型對應如下：

• 內容方塊就是圖片。
• 邊框間距方塊是指外框和藝術品之間的白色安裝板。
• 邊框方塊為邊框，內含圖片的外框。
• 邊界方塊是指頁框之間的距離。
• 陰影與邊界方塊位於相同空間。

對方塊模型進行偵錯

瀏覽器開發人員工具能以視覺化方式呈現所選方塊的機盒模型計算結果，協助您瞭解盒子模型的運作方式，以及這個模型對您使用的網站有何影響。

在瀏覽器中試用這項功能：

1. 開啟開發人員工具。
2. 選取元素。
3. 顯示方塊模型偵錯工具。

控制箱型型號

如要瞭解如何控制 Box 模型，您必須先瞭解瀏覽器會發生什麼情況。

每個瀏覽器都會將使用者代理程式樣式表套用至 HTML 文件，以定義元素在未定義 CSS 時的外觀和行為。使用者代理程式樣式表中的 CSS 會因瀏覽器而異，但可提供較可靠的預設值，讓內容更容易閱讀。

使用者代理程式樣式表的一個屬性，會將方塊的預設 display 設為方塊。舉例來說，在一般流程中，<div> 元素的預設 display 值為 block，<li> 的預設 display 值為 list-item，而 <span> 的預設 display 值為 inline。

inline 元素有區塊邊界，但其他元素則不尊重該元素。 使用 inline-block 時，其他元素會尊重區塊邊界，但第一個元素保留大部分與 inline 元素相同的行為。根據預設，block 項目會填滿可用的內嵌空間，而 inline 和 inline-block 元素則只會填滿內容。

使用者代理程式樣式表也會設定 box-sizing，指示方塊如何計算方塊大小。根據預設，所有元素都具有以下使用者代理程式樣式：box-sizing: content-box;。也就是說，當您設定 width 和 height 等維度時，這些維度會套用至內容方塊。如果設定了 padding 和 border，系統會將這些值新增至內容方塊的大小。

隨堂測驗

測驗您對於會影響屬性的方塊模型大小相關知識。

.my-box {
  width: 200px;
  border: 10px solid;
  padding: 20px;
}

這個方塊的實際寬度為 260 像素。由於 CSS 使用預設的 box-sizing: content-box，因此套用的寬度是內容的寬度，並且兩邊會加上 padding 和 border。內容為 200 像素 + 邊框間距 40px + 20px 的邊框間距，總寬度為 260px。

您可以指定 border-box 大小來變更這項設定：

.my-box {
  box-sizing: border-box;
    width: 200px;
    border: 10px solid;
    padding: 20px;
}

這個替代方塊模型會指示 CSS 將 width 套用至邊框方塊，而不是內容方塊。這表示 border 和 padding 會推入，因此，將 .my-box 設為 200px 寬度時，實際上是在寬度 200px 的情況下轉譯。

請點選下方互動式示範模式，查看運作方式。切換 box-sizing 值時，藍色區域會顯示方框內要套用的 CSS。

*,
*::before,
*::after {
  box-sizing: border-box;
}

這項 CSS 規則會選取文件中的每個元素，以及每個 ::before 和 ::after 虛擬元素，並套用 box-sizing: border-box。這表示每個元素現在都會使用這個替代方塊模型。

由於替代方塊模型較為可預測，因此開發人員經常新增這項規則，用於重設和正規化，就像這樣。

資源

• 盒子模型簡介
• 什麼是瀏覽器開發人員工具？

使用者代理程式樣式表

• Chromium
• Firefox
• Webkit