CSS盒子模型是網頁布局中的基礎，它描述了一個元素占據的空間和邊框的大小。盒子模型包括4個部分：內容區域、內邊距、邊框和外邊距。在這個模型中，一個元素看做一個矩形框，框的大小由4個部分構成。

盒子模型里面有四個不同的部分，分別是：內容區域（content）、內邊距（padding）、邊框（border）以及外邊距（margin）。

內容區域指的是元素里面實際顯示內容的區域。內邊距指的是元素的內容區域和邊框之間的空間，可以用來控制元素內部元素顯示的位置以及大小。邊框是元素的邊框線，可以設置樣式、厚度和顏色。外邊距指的是元素和其他元素之間的空隙。

在CSS中，盒子模型的標準模式是將元素的尺寸和位置計算為內容區域加上內邊距和邊框的大小。

例如，一個元素的代碼如下：

div {
width: 200px; /* 聲明元素寬度 */
height: 100px; /* 聲明元素高度 */
padding: 10px; /* 聲明元素內邊距 */
border: 1px solid black; /* 聲明元素邊框 */
margin: 20px; /* 聲明元素外邊距 */
}

在這個例子中，元素的內容區域是200x100像素，加上內邊距和邊框之后，每個邊上的長度就增加了12像素（2x10px內邊距和2x1像素邊框），因此實際寬度是224像素，高度是132像素。在計算元素和其他元素之間的距離時，還要考慮元素的外邊距。

盒子模型對頁面布局非常重要，如何合理地使用盒子模型，可以幫助開發者實現更加自然的頁面布局效果。