Box 型號

CSS Podcast - 001：方塊模型

假設您有這段 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 的核心基礎。瞭解方塊模型運作方式、如何受到 CSS 其他層面影響，以及如何控制方塊模型，有助於您編寫更可預測的 CSS。

請務必記住，CSS 顯示的所有內容都是方塊，即使只是文字，或是具有 border-radius 讓它看起來像圓形也一樣。

內容和尺寸

方塊的行為會因 display 值、設定的尺寸和所含內容而有所不同。這項內容可以是純文字，也可以是子元素產生的更多方塊。無論採用哪種方式，根據預設，內容都會影響方塊的大小。

您可以透過外部尺寸控制這項設定，也可以使用內部尺寸，讓瀏覽器根據內容大小為您做出決定。

以下是說明差異的基本範例：

這個範例的方塊中含有「CSS is awesome」字樣，且方塊的尺寸固定，並有粗邊框。由於方塊具有指定寬度，因此是外部大小。也就是說，它會控管子項內容的大小。不過，方塊容不下「awesome」這個字，因此會溢出父項方塊的邊框方塊 (稍後會詳細說明)。如要避免溢位，其中一種方法是讓方塊的尺寸由內而外決定，也就是不設定寬度，或在本例中將 width 設為 min-content。min-content 關鍵字會指示方塊的寬度與內容的最小內建寬度 (「awesome」一字) 相同。這樣方塊就能完美貼合文字。

以下是較複雜的範例，顯示不同大小對實際內容的影響：

開啟及關閉內建大小調整功能，即可查看外建大小調整功能如何提供更多控制權，以及內建大小調整功能如何提供更多內容控制權。如要查看效果，請在卡片中加入幾行文字。 如果這個元素具有外部大小調整功能，您可新增的內容量會受到限制，超過限制就會溢位，但如果開啟內部大小調整功能，就不會發生這種情況。

根據預設，這個元素有一組 width 和 height 的 400px。這些尺寸會嚴格限制元素內的所有項目，除非內容過大而無法放入方塊，否則都會遵守這些限制。如要查看實際效果，請將花朵圖片下方的說明文字改成超過方塊高度的內容。

重要術語：如果內容太大，無法放入所在方塊，就會發生溢位。您可以使用 overflow 屬性，管理元素處理溢位內容的方式。

切換至內在大小後，瀏覽器會根據方塊的內容大小為您做出決定。這樣一來，方塊會隨著內容調整大小，溢位的可能性就大幅降低。

請務必記得，內在大小是瀏覽器的預設行為，通常比外在大小更具彈性。

方塊模型的區域

方塊是由不同的方塊模型區域組成，每個區域都負責特定工作。

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

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

邊框方塊會包圍邊框間距方塊，其空間由 border 值定義，可為元素建立視覺框架。元素的邊框邊緣是可見範圍的極限。

最後一個區域是邊界方塊，也就是方塊周圍的空間，由方塊的 margin 規則定義。outline 和 box-shadow 等屬性也會佔用這個空間，因為這些屬性會繪製在元素頂端，且不會影響方塊的大小。變更方塊的 outline-width of 200px 不會改變邊界內的任何內容。

實用的類比

方塊模型很難理解，因此我們用一個比喻來總結目前所學。

在這張圖中，牆上並排掛著三個相框。帶框圖片的元素對應的方塊模型如下：

• 內容方塊就是圖片。
• 襯墊盒是白色安裝板，位於畫框和藝術品之間。
• 邊框方塊是外框，提供藝術作品的實際邊框。
• 邊界方塊是影格之間的空間。
• 陰影佔用的空間與邊界方塊相同。

偵錯方塊模型

瀏覽器開發人員工具會顯示所選方塊的方塊模型計算結果，協助您瞭解方塊模型的運作方式，以及對您正在處理的網站有何影響。

如要在 Chrome 中試用這項功能，請按照下列步驟操作：

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

控制方塊模型

如要瞭解如何控制方塊模型，請先瞭解瀏覽器中發生的情況。

每個瀏覽器都會將使用者代理程式樣式表套用至 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 像素 + 邊框間距 40 像素 + 邊框 20 像素，總共可見寬度為 260 像素。

如要變更這項設定，請指定 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