CSS 盒子模型是網(wǎng)頁布局的基本模型，其中盒子是指網(wǎng)頁中的每個元素，包括文本、圖像、按鈕等等。在 CSS 中，每個盒子都被視為一個矩形盒子，具有四個邊框、內(nèi)部內(nèi)容和一個外部邊距。

盒子模型由四個部分組成：內(nèi)容(content)、填充(padding)、邊框(border)和外邊距(margin)。其中，內(nèi)容是元素的實際內(nèi)容，填充是內(nèi)容和邊框之間的區(qū)域，邊框是一條圍繞左、上、右和下邊的線，而外邊距是邊框和相鄰元素之間的空白區(qū)域。

p {
content: "這是一個段落";
padding: 10px;
border: 1px solid black;
margin: 20px;
}

在上面的代碼塊中，我們定義了一個段落元素，它具有 10 像素的填充、1 像素的黑色邊框和 20 像素的外邊距。這意味著該元素的實際寬度為：

實際寬度 = 內(nèi)容寬度 + 填充寬度 + 邊框寬度*2 + 外邊距寬度*2

由于我們的段落內(nèi)容很短，因此實際寬度將比父容器的寬度小 40 像素（左右外邊距各占 20 像素）。如果想讓內(nèi)容和邊框的寬度與容器寬度相等，則應將容器的寬度減去填充和邊框寬度。

在實際開發(fā)中，我們通常需要為不同的元素設置不同的盒子模型。例如，一個按鈕可能具有更大的填充和外邊距，而一個圖片可能沒有邊框或外邊距。

總之，CSS 盒子模型是網(wǎng)頁布局不可或缺的基本模型。通過定義它們的樣式，我們可以輕松地控制元素的大小、位置和外觀。