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

一、什么是盒子模型？

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

想象一下俄罗斯套娃：

• 最内层：内容（你真正想展示的东西）

• 第二层：内边距（内容与边框之间的缓冲空间）

• 第三层：边框（盒子的边界）

• 最外层：外边距（盒子与其他盒子之间的距离）

二、盒子模型的组成部分

1. 内容区域（Content）

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

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

2. 内边距（Padding）

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

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）

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

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）

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

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

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

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

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

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

.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包含内容+内边距+边框的尺寸。

.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!