CSS中盒子模型是頁面布局中非常重要的概念之一。在CSS盒子模型里面，一個(gè)HTML元素會(huì)被看做是一個(gè)矩形框，這個(gè)框就是一個(gè)盒子，而且一個(gè)HTML元素的盒子模型其實(shí)是分為幾個(gè)不同的層次的，下面我們來一一了解。

第一層：content

+---------------+
|    Content    |
|               |
|               |
+---------------+

這一層稱之為content，它代表著一個(gè)HTML元素的實(shí)際內(nèi)容，比如一段文本、一張圖片等等，這個(gè)區(qū)域的大小由content-box設(shè)置，并且width和height只是包含內(nèi)容元素本身（不包含padding、border和margin）的尺寸。

第二層：padding

+---------------------------+
|          Padding          |
|                           |
|     +---------------+     |
|     |    Content    |     |
|     |               |     |
|     +---------------+     |
|                           |
+---------------------------+

接下來是padding層，它是一個(gè)包裹在content層外面的區(qū)域，它的大小可以由padding-box設(shè)置，padding層和content層一起形成了元素的可見部分，可以理解為是元素的“內(nèi)部邊距”，它的大小只和padding屬性有關(guān)。

第三層：border

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

接下來就是border層，它是圍繞在padding層外面的一層邊框，它的大小可以由border-box設(shè)置，border層只和border屬性有關(guān)。

第四層：margin

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

最后是margin層，它是元素和周圍元素之間的空白，它的大小只和margin屬性有關(guān)，可以理解為元素的“外部邊距”。

對(duì)于CSS盒子模型，對(duì)于這些不同的層次的劃分是非常重要的，我們可以通過設(shè)置相應(yīng)的屬性來控制元素在不同層次上的表現(xiàn)，比如控制border的顏色和寬度、控制padding的大小、控制margin的大小等等。因此，學(xué)習(xí)盒子模型是CSS布局的基礎(chǔ)，了解盒子模型也是前端開發(fā)非常重要的一部分。