Box 型號

CSS Podcast - 001：Box 模型

假設您有以下這段 HTML：

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

然後為該 CSS 編寫這個 CSS：

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

內容最終寬度為 142 像素，而非您指定的 100 像素， 分隔元素為什麼會這樣？

盒子模型是 CSS 的核心基礎。瞭解箱型模型 運作方式、CSS 其他方面對這個問題的影響 並利用這些控管方式 就能編寫更容易預測的 CSS

瞭解 CSS 的方塊模型有助於釐清 內容無法放進元素中。

請務必記得，CSS 顯示的所有內容都是一個方塊， 只有部分文字，或以 border-radius 看起來像圓形。

內容和大小

Box 會根據本身的 display 值 (即與其組別) 設定不同行為 維度和包含的內容此內容可以是純文字，或 子項元素產生的方塊。無論如何，內容都會影響 方塊的預設狀態

如要控管這項設定，您可以採用極端規模，也可以使用內建大小調整功能。 讓瀏覽器根據內容大小 做決定

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

包裝盒尺寸經過極端調整 限制在內容超出方塊前可新增的內容量。 導致「超棒」一詞溢位。

示範中提到「CSS 真棒」一個固定尺寸及一個方塊 粗框線由於方塊設有指定寬度，因此尺寸會超出限制。 這表示該控制項可控管子項內容的大小。不過， 「太棒了」太大，超出方塊的尺寸，因此溢位 邊框 (稍後會詳細說明)。避免這種溢位現象的方法之一 方塊的大小取決於內部的高度，或者在本例中 將 width 設為 min-content。min-content 關鍵字會指示系統 寬度至少等同於包含內容的最小寬度 (「 「太棒了」)。讓方塊與文字的四周完全貼合。

以下這個更複雜的範例顯示不同尺寸的真實大小 內容：

以極端尺寸調整 某個元素內建函式尺寸可防止文字溢位。

開啟及關閉內建函式調整大小功能，查看外界大小如何帶來更大效果 並提供極端規模和內建函式調整功能 控管功能如要查看特效，請在資訊卡中新增幾句話。 這個元素的大小調整後，內容數量會受到限制 可能會在溢位之前 這是目前啟用狀態

根據預設，這項元素各有一組 width 和 height 設為 400px。 這些維度會為元素內的所有內容設定嚴格的邊界， 除非內容太大，不超出方塊大小。您可以實際查看 將花朵圖片下的說明文字 變更為超過 方塊的高度

重要字詞：如果內容太大，無法放入箱中，就會發生溢位現象。你可以 使用 overflow 屬性管理元素處理溢位內容的方式。

切換為內建大小調整功能，可讓瀏覽器根據 方塊的內容大小這大幅降低溢位現象 隨內容調整大小

請注意，內建大小調整功能是瀏覽器的預設值 而且通常比外在調整大小更具彈性。

盒子模型的領域

箱子是由不同的盒子模型區域組成，這些區域都是執行特定工作。

顯示 Box 模型的四個主要區域：內容方塊、邊框間距方塊、邊框方塊和邊界方塊
方塊模型的四個主要區域：內容方塊、邊框間距方塊、邊框方塊和 邊界方塊。

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

邊框間距方塊會圍繞內容方塊，也就是由 padding 屬性。 由於邊框間距位於方塊內，因此方塊背景可以顯示在空間中 新建的 Pod 如果方塊設有溢位規則，例如 overflow: auto 或 overflow: scroll，捲軸也會佔用這個空間。

在邊框間距方塊中捲動長條。

框線圍繞著邊框間距方塊，且空間是由 border 值， 會為元素建立視覺頁框元素的框線是 你的檢視權限會受到限制

最後一個區域則是邊界方塊，也就是方塊的周圍空間 (由 方塊的 margin 規則。屬性包括 outline 和 box-shadow。 也佔用空間，因為這類圖像是繪製在元素上，而且不會 方塊的大小正在變更方塊的 outline-width (共 200px 個) 方塊內不會有任何變化。

較長的外框不會影響其他元素的大小。

實用的類比

箱型模型相當複雜，所以我們用一個比喻 。

三個相框。
使用物理相框表示的包裝盒模型。

如上圖所示 牆壁。取框圖片的元素會對應至方框模型，如下所示：

  • 內容方塊則是圖片。
  • 邊框間距框是邊框和圖片之間的白色安裝板，
  • 邊框方塊就是邊框，提供圖片常值的邊框。
  • 邊界方塊是指頁框之間的間距。
  • 陰影會佔用與邊界框相同的空間。

對箱模型進行偵錯

瀏覽器開發人員工具會以視覺化的方式呈現所選方框模型 因此能協助你瞭解發盒模型的運作原理和運作方式 會影響您目前瀏覽的網站

在瀏覽器中試試看：

  1. 開啟開發人員工具。
  2. 選取元素。
  3. 顯示方塊模型偵錯工具。
，瞭解如何調查及移除這項存取權。
大綱示範的方塊模型偵錯工具。

控制箱型模型

如果想瞭解如何控制 Box 模型，就必須先瞭解 。

每個瀏覽器都會將使用者代理程式樣式表套用至定義 元素在未定義 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;
}

你認為「.my-box」的面積有多大？

200 像素
由於方塊大小的預設值是內容方塊、邊框間距和 系統會在寬度中加入框線。200px 盒子內有 box-sizing: border-box。
260 像素
預設方塊大小為內容方塊，也就是邊框間距和 將邊框新增到整個方塊中。

這個方塊的實際寬度為 260 像素。 由於 CSS 使用預設的 box-sizing: content-box，因此套用的寬度會是 且兩邊的 padding 和 border 都會新增至 這些資料。內容為 200px + 邊框間距 40px + 邊框間距 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。 這表示每個元素現在都會使用這個替代 Box 模型。

由於替代箱模型比較容易預測，開發人員通常會 就像這項規則一樣，重設此規則及正規化工具。

資源

使用者代理程式樣式表