一、什么是盒子模型？
每个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!
)
)
