CSS 盒模型是用于布局網(wǎng)頁(yè)中元素的一種模型，它包括了一個(gè)內(nèi)容區(qū)域，加上圍繞著內(nèi)容的邊框、內(nèi)邊距和外邊距。換句話說(shuō)，一個(gè)元素所占用的空間不僅僅包括其內(nèi)容區(qū)域，還包括其周圍的一些區(qū)域。

下面是 CSS 盒模型的組成部分：

.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 10px;
}

上面代碼中，.box 類設(shè)置了一個(gè)寬度為 200px、高度為 100px 的盒子。可以看到這個(gè)盒子由以下幾部分組成：

1. Content (內(nèi)容區(qū)域)

這是盒子中實(shí)際包含內(nèi)容的部分。它的大小由 width 和 height 屬性決定。

2. Padding (內(nèi)邊距)

內(nèi)邊距是從內(nèi)容區(qū)域到邊框之間的一片區(qū)域。它的大小由 padding 屬性決定。

3. Border (邊框)

邊框是圍繞在內(nèi)邊距和內(nèi)容區(qū)域外的一條線，它的類型、顏色和大小可以通過(guò) border 屬性來(lái)設(shè)置。

4. Margin (外邊距)

外邊距是指盒子與周圍元素之間的空間。可以通過(guò) margin 屬性來(lái)控制它的大小。

了解了盒模型的組成部分，我們就能更好地掌握如何定位和布局元素。