CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型，指在一個網頁文檔中，每個元素都被呈現為一個矩形的盒子，描述了元素所占空間的內容。

CSS盒子模型由哪四部分組成？

盒子模型由元素內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)幾個要素組成。

可以發現margin、border、padding是CSS屬性，因此可以通過這三個屬性來控制盒子的這三個部分。而content則是HTML元素的內容。

內容區(content)

內容區是盒子模型的中心，它呈現了盒子的主要信息內容，這些內容可以是文本、圖片等多種類型。內容區有三個屬性，width、height 和overflow。

使用width和height屬性可以指定盒子內容區的高度和寬度，當內容信息太多，超出內容區所占范圍時，可以使用overflow 溢出屬性來指定處理方法。

當overflow 屬性值為hidden時，溢出部分將不可見；為visible時，溢出的內容信息可見，只是被呈現在盒子的外部；當為scroll時，滾動條將被自動添加到盒子中，用戶可以通過拉動滾動條顯示內容信息；當為auto時，將由瀏覽器決定如何處理溢出部分。

填充(padding)

填充是內容區和邊框之間的空間。填充的屬性有五種 ，即padding -top、padding -bottom、padding -left、padding-right 以及綜合了以上四種方向的快捷填充屬性padding。

使用這五種屬性可以指定內容區信息內容與各方向邊框間的距離。設置盒子背景色屬性時，可使背景色延伸到填充區域。

邊框(border)

邊框是環繞內容區和填充的邊界。邊框的屬性有border-style、border-width和border-color 以及綜合了以上三類屬性的快捷邊框屬性 border。

border-style 屬性是邊框最重要的屬性，如果沒有指定邊框樣式，其他的邊框屬性都會被忽略，邊框將不存在。CSS規定了dotted(點線)、dashed(虛線)、solid(實線)等九種邊框樣式。

使用border-width屬性可以指定邊框的寬度，其屬性值可以是長度計量值，也可以是CSS規定的thin、medium 和thick。

使用border-color屬性可以為邊框指定相應的顏色，其屬性值可以是RGB值，也可以是CSS 規定的17個顏色名 。

在設定以上三種邊框屬性時，既可以進行邊框四個方向整體的快捷設置，也可以進行四個方向的專向設置，如border: 2px solid green 或border-top-style: solid、border-left-color: red等。

設置盒子背景色屬性時，在IE中背景不會延伸到邊框區域，但在FF等標準瀏覽器中，背景顏色可以延伸到邊框區域，特別是單邊框設置為點線或虛線時能看到效果。

空白邊(margin)

空白邊位于盒子的最外圍，是添加在邊框外周圍的空間。空白邊使盒子之間不會緊湊地連接在一起，是CSS 布局的一個重要手段。

空白邊的屬性有五種 ，即margin-top、margin-bottom、margin- left、margin-right以及綜合了以上四種方向的快捷空白邊屬性margin，其具體的設置和使用與填充屬性類似。

對于兩個相鄰的(水平或垂直方向 )且設置有空白邊值的盒子，他們鄰近部分的空白邊將不是二者空白邊的相加，而是二者的并集。

若二者鄰近的空白邊值大小不等，則取二者中較大的值。

同時，CSS 容許給空白邊屬性指定負數值，當指定負空白邊值時，整個盒子將向指定負值方向的相反方向移動，以此可以產生盒子的重疊效果。

采用指定空白邊正負值的方法可以移動網頁中的元素，這是CSS 布局技術中的一個重要方法。

盒子的大小

盒子的大小指的是盒子的寬度和高度。大多數初學者容易將寬度和高度誤解為width和height屬性，然而默認情況下width和height屬性只是設置content(內容)部分的寬和高。盒子真正的寬和高按下面公式計算：盒子的寬度 = 內容寬度 + 左填充 + 右填充 + 左邊框 + 右邊框 + 左邊距 + 右邊距

盒子的高度 = 內容高度 + 上填充 + 下填充 + 上邊框 + 下邊框 + 上邊距 + 下邊距

為了顯得專業一點，我們還可以用帶屬性的公式表示：盒子的寬度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面說到的是 默認 情況下的計算方法，另外一種情況下，width和height屬性設置的就是盒子的寬度和高度。盒子的寬度和高度的計算方式由box-sizing屬性控制。box-sizing屬性值

content-box：默認值，width和height屬性分別應用到元素的內容框。在寬度和高度之外繪制元素的內邊距、邊框、外邊距。

border-box：為元素設定的width和height屬性決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去外邊距、邊框和內邊距才能得到內容的寬度和高度。

inherit：規定應從父元素繼承box-sizing屬性的值。

總結

以上是生活随笔為你收集整理的html盒子模型包含哪些部分,CSS盒子模型由哪四部分组成？的全部內容，希望文章能夠幫你解決所遇到的問題。

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