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

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

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

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

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

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

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

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

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

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

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

參見

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

規(guī)范

規(guī)范狀態(tài)注釋

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 語法,?@規(guī)則,?注釋,?優(yōu)先級和繼承, the?盒模型,?布局模式和視覺格式化模型，以及外邊距合并，或者初始、計算、解析、指定、使用和實際值。 Definitions of?值語法、簡寫屬性和可替換元素。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。