CSS盒子模型：网页布局的基石与艺术

一、什么是盒子模型？

每个HTML元素在浏览器中都被渲染为一个矩形盒子。CSS盒子模型描述了这些盒子如何构成：从内容区域开始，依次添加内边距、边框和外边距。理解盒子模型是掌握CSS布局的第一步。

想象一下俄罗斯套娃：

最内层：内容（你真正想展示的东西）
第二层：内边距（内容与边框之间的缓冲空间）
第三层：边框（盒子的边界）
最外层：外边距（盒子与其他盒子之间的距离）

二、盒子模型的组成部分

1. 内容区域（Content）

盒子最核心的部分，包含文本、图片等实际内容。

css 复制代码

div {
  width: 200px;      /* 内容区域的宽度 */
  height: 150px;     /* 内容区域的高度 */
  background: #f0f0f0;
}

2. 内边距（Padding）

内容区域与边框之间的空间，背景色会延伸到内边距区域。

css 复制代码

div {
  padding: 20px;     /* 简写：四个方向都是20px */
  
  /* 分别设置各边内边距 */
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  
  /* 简写的不同形式 */
  padding: 10px;                /* 上右下左都是10px */
  padding: 10px 20px;           /* 上下10px，左右20px */
  padding: 10px 20px 15px;      /* 上10px，左右20px，下15px */
  padding: 10px 20px 15px 5px;  /* 上10px，右20px，下15px，左5px */
}

3. 边框（Border）

围绕内容和内边距的边界线，可以设置样式、宽度和颜色。

css 复制代码

div {
  /* 边框的三个属性 */
  border-width: 2px;      /* 边框宽度 */
  border-style: solid;    /* 边框样式：solid, dotted, dashed, double等 */
  border-color: #333;     /* 边框颜色 */
  
  /* 简写形式 */
  border: 2px solid #333;
  
  /* 分别设置各边边框 */
  border-top: 1px dashed red;
  border-right: 2px solid blue;
  border-bottom: 3px dotted green;
  border-left: 4px double orange;
  
  /* 圆角边框 */
  border-radius: 10px;
  border-radius: 50%;     /* 圆形 */
}

4. 外边距（Margin）

盒子与其他盒子之间的空间，始终是透明的，不会显示背景。

css 复制代码

div {
  margin: 20px;      /* 四个方向都是20px */
  
  /* 简写与padding相同 */
  margin: 10px 20px;  /* 上下10px，左右20px */
  
  /* 特殊值 */
  margin: 0 auto;     /* 水平居中（左右auto平均分配） */
  margin-top: -10px;  /* 负外边距，元素会重叠 */
}

三、标准盒子模型 vs 替代盒子模型

这是盒子模型中最关键的区别！

1. 标准盒子模型（content-box）【默认】

元素的width和height只包含内容区域的尺寸。

css 复制代码

.box {
  box-sizing: content-box; /* 默认值 */
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

实际占据空间计算：

总宽度 = width + 左右padding + 左右border + 左右margin
- = 200 + 20*2 + 5*2 + 10*2 = 270px
总高度 = height + 上下padding + 上下border + 上下margin
- = 100 + 20*2 + 5*2 + 10*2 = 170px

2. 替代盒子模型（border-box）

元素的width和height包含内容+内边距+边框的尺寸。

css 复制代码

.box {
  box-sizing: border-box;
  width: 200px;      /* 这个200px包含了内容+padding+border */
  height: 100px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

实际占据空间计算：

总宽度 = width + 左右margin
- = 200 + 10*2 = 220px
总高度 = height + 上下margin
- = 100 + 10*2 = 120px

内容区域实际尺寸：

内容宽度 = width - 左右padding - 左右border
- = 200 - 20*2 - 5*2 = 150px
内容高度 = height - 上下padding - 上下border
- = 100 - 20*2 - 5*2 = 50px

推荐使用border-box!