盒子模型是CSS中的重要概念，也是掌握CSS布局的关键之一。在CSS中，每个元素都被看作一个盒子，其中包含内容区、内边距、边框和外边距四个部分，这四个部分组成了CSS盒子模型。下面是一个典型的CSS盒子模型：
┏━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ 外边距 ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━┛ ┌───────────────────────┐ │ 边框 │ │ ┌─────────────────┐ │ │ │ 内边距 │ │ │ └─────────────────┘ │ │ ＼ 呈现内容区域 ／ │ └───────────────────────┘
从图中可以看出，外边距在盒子外部，边框包围着内边距和呈现内容区域。下面是一个简单的HTML代码，以及应用盒子模型的CSS样式：
<div class="my-box">我是一个盒子</div>
.my-box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px dashed #999;
margin: 10px;
}
上述代码将生成一个宽度为200px、高度为100px的盒子，内边距为10px，边框为1px虚线边框，外边距为10px。如果我们在浏览器中查看该页面，就可以看到下图效果：
┏━━━━━━━━━━━━━━━━━━━━━━━┓ ┃ 外边距 ┃ ┃ 边框 ┃ ┃ 内边距 ┃ ┃ 呈现内容区域 ┃ ┃ 边框 ┃ ┃ 内边距 ┃ ┗━━━━━━━━━━━━━━━━━━━━━━━┛
通过使用盒子模型，我们可以更好的控制元素的大小、位置和样式，从而实现更精确的页面布局。
