CSS盒模型是CSS中最重要的內容之一，它用于描述HTML元素的布局和尺寸。CSS盒子分為三個部分：

+----------------------------+
|            Margin          |
|                            |
|  +----------------------+  |
|  |       Border         |  |
|  |                      |  |
|  |  +----------------+  |  |
|  |  |     Padding    |  |  |
|  |  |             Content |  |
|  |  |                  |  |  |
|  |  +----------------+  |  |
|  |                      |  |
|  +----------------------+  |
|                            |
+----------------------------+

第一個盒子是Content盒子，它包含了HTML元素的實際內容（比如文本、圖像等等）。Content盒子的寬度和高度即為元素實際內容的寬度和高度。如果設置的寬度和高度不足以容納內容，則會發生溢出。

第二個盒子是Padding盒子，它位于Content盒子的內部，在Content盒子和Border盒子之間。Padding盒子的寬度和高度由padding屬性定義，它可以給元素添加一個內部空白區域。

第三個盒子是Border盒子，它位于Padding盒子的外部，在Margin盒子和Padding盒子之間。Border盒子的寬度和高度由border屬性定義，它可以給元素添加一個邊框。Border盒子的邊框會影響元素的大小和位置。

第四個盒子是Margin盒子，它位于Border盒子的外部，它由margin屬性定義，它可以給元素添加一個外部空白區域。Margin盒子的大小和位置會影響元素與其他元素的距離。

總之，了解CSS盒模型的三個盒子非常重要，它可以幫助你更好地控制元素的布局和尺寸。