當對一個文檔進行布局（lay out）的時候，瀏覽器的渲染引擎會根據標準之一的?CSS 基礎框盒模型（CSS basic box model），將所有元素表示為一個個矩形的盒子（box）。CSS 決定這些盒子的大小、位置以及屬性（例如顏色、背景、邊框尺寸…）。

每個盒子由四個部分（或稱區域）組成，其效用由它們各自的邊界（Edge）所定義（原文：defined by their respective edges，可能意指容納、包含、限制等）。如圖，與盒子的四個組成區域相對應，每個盒子有四個邊界：內容邊界?Content edge、內邊距邊界?Padding Edge、邊框邊界?Border Edge、外邊框邊界?Margin Edge。

內容區域 content area?，由內容邊界限制，容納著元素的“真實”內容，例如文本、圖像，或是一個視頻播放器。它的尺寸為內容寬度（或稱?content-box 寬度）和內容高度（或稱?content-box 高度）。它通常含有一個背景顏色（默認顏色為透明）或背景圖像。

如果?box-sizing?為?content-box（默認），則內容區域的大小可明確地通過?width、min-width、max-width、height、min-height，和?max-height?控制。

內邊距區域 padding area?由內邊距邊界限制，擴展自內容區域，負責延伸內容區域的背景，填充元素中內容與邊框的間距。它的尺寸是?padding-box 寬度?和?padding-box 高度。

內邊距的粗細可以由?padding-top、padding-right、padding-bottom、padding-left，和簡寫屬性?padding?控制。

邊框區域 border area?由邊框邊界限制，擴展自內邊距區域，是容納邊框的區域。其尺寸為?border-box? 寬度?和?border-box 高度。

邊框的粗細由?border-width?和簡寫的?border?屬性控制。如果?box-sizing?屬性被設為?border-box，那么邊框區域的大小可明確地通過?width、min-width,?max-width、height、min-height，和?max-height?屬性控制。假如框盒上設有背景（background-color?或?background-image），背景將會一直延伸至邊框的外沿（默認為在邊框下層延伸，邊框會蓋在背景上）。此默認表現可通過 CSS 屬性?background-clip?來改變。

外邊距區域 margin area?由外邊距邊界限制，用空白區域擴展邊框區域，以分開相鄰的元素。它的尺寸為?margin-box 寬度?和?margin-box 高度。

外邊距區域的大小由?margin-top、margin-right、margin-bottom、margin-left，和簡寫屬性?margin?控制。在發生外邊距合并的情況下，由于盒之間共享外邊距，外邊距不容易弄清楚。

最后，請注意，除可替換元素外，對于行內元素來說，盡管內容周圍存在內邊距與邊框，但其占用空間（每一行文字的高度）則由?line-height?屬性決定，即使邊框和內邊距仍會顯示在內容周圍。

參見

• 布局與包含塊
• CSS 層疊介紹
• 層疊和繼承

規范

規范狀態注釋

CSS Basic Box Model	Working Draft	?
CSS Level?2 (Revision?1)	Recommendation	Though more precisely worded, there is no practical change. 盡管有了更詳盡的描述，但沒有實際上的變化。
CSS Level?1	Recommendation	Initial definition. 最初的定義。

參見

• CSS Key Concepts:?CSS 語法,?@規則,?注釋,?優先級和繼承, the?盒模型,?布局模式和視覺格式化模型，以及外邊距合并，或者初始、計算、解析、指定、使用和實際值。 Definitions of?值語法、簡寫屬性和可替換元素。

總結

以上是生活随笔為你收集整理的CSS 基础框盒模型介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。