CSS盒模型是前端布局的核心基础，所有HTML元素都可以看作是一个矩形的盒子，这个盒子由内容区域、内边距、边框和外边距四个部分组成，理解这四个部分的规则是实现精确布局的前提。
盒模型的四个核心组成部分
每个盒子的结构从内到外依次是：
- 内容区域（content）：放置元素实际内容的区域，尺寸由width和height属性控制。
- 内边距（padding）：内容区域到边框之间的空白区域，会扩大盒子的实际占据空间。
- 边框（border）：包裹内边距和内容的边框，同样会增加盒子的总尺寸。
- 外边距（margin）：盒子与其他元素之间的间隔，不会影响盒子自身的尺寸，但会影响元素在页面中的布局位置。
标准盒模型与IE盒模型的差异
CSS中默认的盒模型是标准盒模型，此时width和height仅控制内容区域的尺寸，盒子的总宽度计算公式为：
总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
如果希望width和height直接控制盒子的最终尺寸，包括内边距和边框，可以切换为IE盒模型（也叫border-box盒模型），通过box-sizing属性设置：
/* 切换为IE盒模型，width包含内容、padding、border */
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 2px solid #333;
/* 此时内容区域实际宽度为 200 - 20*2 - 2*2 = 156px */
}
盒模型属性对精确布局的影响
padding的使用注意
padding不能为负值，设置过大的padding会导致内容区域被压缩，甚至超出父容器。如果父容器没有设置固定高度，子元素的padding还会撑开父容器的高度，这一点在垂直布局时需要特别注意。
margin的合并问题
垂直方向相邻的两个块级元素，它们的上下外边距会发生合并，最终的外边距取两个值中较大的那个，而不是相加。比如上方元素margin-bottom为20px，下方元素margin-top为30px，两个元素之间的实际间距是30px。如果需要避免合并，可以给其中一个元素设置内边距或者触发BFC。
边框对尺寸的影响
边框的宽度会直接增加盒子的总尺寸，即使是1px的边框，也会让盒子的宽度和高度各增加2px（左右/上下各1px）。在做精确像素对齐的布局时，一定要把边框的宽度计算进去，避免元素排列错位。
实际布局案例演示
假设我们需要做一个宽度为1000px的容器，内部放两个宽度各为50%的并列盒子，两个盒子之间有20px的间距，同时每个盒子有10px的内边距和1px的边框，使用IE盒模型可以轻松实现：
/* 父容器 */
.container {
width: 1000px;
display: flex;
gap: 20px; /* 两个子元素的间距 */
}
/* 子盒子 */
.item {
box-sizing: border-box;
width: 50%; /* 每个占父容器一半宽度，已经包含gap的影响？不对，flex布局中gap不占用子元素宽度，这里调整下 */
/* 修正：flex布局中gap是额外间距，所以子元素宽度应该计算为 (1000 - 20) / 2 = 490px */
width: 490px;
padding: 10px;
border: 1px solid #eee;
/* 此时每个盒子的总宽度就是490px，包含padding和border，两个盒子加20px间距刚好1000px */
}
如果使用标准盒模型，子元素的width需要设置为490 - 10*2 - 1*2 = 468px，计算起来会更复杂，因此做精确布局时更推荐使用box-sizing: border-box。
常见布局问题排查
如果遇到元素总宽度超出父容器的情况，可以先检查：
- 是否设置了正确的
box-sizing属性，有没有把padding和border的宽度算入总尺寸。 - margin是否发生了合并，导致元素之间的间距比预期大。
- 有没有给元素设置默认的padding或margin，很多浏览器会给
<ul>、<body>等元素设置默认的外边距或内边距，做布局前最好先重置这些默认样式。
提示：全局设置* { box-sizing: border-box; }可以让所有元素默认使用IE盒模型，能大幅减少尺寸计算的复杂度，是很多前端项目的常用做法。
CSS_box_modelmarginpaddingborder修改时间：2026-06-20 00:15:26