页面里一个元素的真实占位尺寸，从来不是单纯的width或height决定的。很多布局错位、横向滚动条莫名出现的问题，根源都在于对盒模型计算规则理解不透彻。这篇文章把盒模型的四个组成部分拆开来讲，把总宽高的计算公式、两种盒模型的区别、以及实际开发中的控制手段一次性说清楚。
盒模型的四个组成部分与总宽高计算公式
一个元素在页面中占据的空间，由四个圈层构成，从内到外依次是内容区content、内边距padding、边框border和外边距margin。前三者属于元素本体，会在背景色和边框绘制中体现出来，而margin是元素与其他元素之间的透明间隔，不参与背景绘制，但实实在在占用布局空间。
在默认的标准盒模型（也就是box-sizing为content-box时）下，元素总宽度的计算公式是：总宽度 = width + 左padding + 右padding + 左border + 右border + 左margin + 右margin。总高度同理。这意味着如果你设置width为200px、padding为20px、border为5px，那么仅元素本体就占了200 + 40 + 10 = 250px，如果再算上margin，占位会更大。这就是为什么很多初学者发现元素总是比自己设定值更宽。
举个具体例子来验证一下。下面的代码中，一个盒子声明宽度为300px，但它在页面里实际占据的宽度是380px：
.box {
width: 300px;
padding: 20px;
border: 10px solid #333;
margin: 10px;
}
/* 实际占位宽度 = 300 + 20*2 + 10*2 + 10*2 = 380px */
/* 盒子本体宽度（不含margin） = 300 + 20*2 + 10*2 = 360px */需要特别注意的是，height的计算也遵循同样的规则。如果一个父容器高度固定，子元素的padding和border把它撑高，就容易出现溢出。另外，margin在垂直方向上还存在合并现象，相邻两个块的上下margin会取较大值而不是相加，这在进行总高度推算时也要考虑进去。
标准盒模型与IE盒模型的本质区别
盒模型其实有两种计算模式。前面说的标准盒模型（content-box）中，width只代表内容区的宽度，padding和border都在width之外向外扩展。而IE盒模型（border-box）则完全相反：width代表的是内容区加padding加border的整体宽度，padding和border向内挤压内容区。
这两种模式的差异在同样的代码下会产生完全不同的渲染结果。看下面这个对比：
/* 标准盒模型：本体宽度 = 200 + 40 + 10 = 250px */
.content-box-demo {
box-sizing: content-box;
width: 200px;
padding: 20px;
border: 5px solid #999;
}
/* IE盒模型：本体宽度 = 200px，内容区被压缩为150px */
.border-box-demo {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #999;
}可以看出，border-box模式下声明的width就是元素的最终视觉宽度，padding再大也不会把元素撑得超过200px，只会让内部可用空间变小。这种特性让尺寸计算变得非常直观，因此在实际项目里，绝大多数团队都会全局启用border-box。早期IE5.5和IE6混杂模式采用的就是这种模型，当年这也被视为不标准，但后来大家发现它其实更符合直觉，于是CSS3干脆把它标准化为box-sizing的一个可选值。
顺便一提，box-sizing还有一个取值是padding-box，表示width包含padding但不含border，不过这个值只有Firefox曾经支持过，目前主流浏览器都不认，可以忽略。
box-sizing的实战应用与宽度溢出的规避技巧
实际项目中推荐的通行做法，是在全局重置样式里统一设置border-box：
*, *::before, *::after {
box-sizing: border-box;
}
/* 或者更严谨的写法，避免影响第三方组件的继承 */
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}第二种写法的好处是，通过inherit让box-sizing可以继承，某些依赖content-box的第三方组件只需要在自己的根节点上声明一次就能恢复正常，不会被通配符选择器强行覆盖。
在多列布局场景下，盒模型计算尤为关键。假设要做一行三列、每列间距20px的布局，容器宽度900px。如果用content-box思维去写，每列width应该设为(900 - 20*2) / 3 ≈ 286.67px，还得考虑padding会不会把总宽撑爆，稍有不慎第三列就被挤到下一行。而用border-box就简单得多：
.container {
width: 900px;
}
.col {
box-sizing: border-box;
width: 286.67px;
margin-right: 20px;
padding: 15px;
float: left;
}
.col:last-child {
margin-right: 0;
}
/* 每列最终宽度固定，padding向内挤压，不会溢出 */响应式开发中还有一个实用技巧：给元素的width使用百分比或calc，同时配合border-box，可以让元素在任何屏幕宽度下都严格占满预期的比例空间。例如width: 50%在border-box下永远是父容器宽度的一半，不会因为加了padding就变成50%再多出一截。
容易踩坑的细节：min-width、替换元素与负margin
除了基础公式，还有几个细节值得注意。首先是min-width和max-width的优先级高于width，在border-box模式下，这些约束同样是针对包含padding和border的整体尺寸生效的，而不是针对内容区。如果给一个border-box元素同时设置width: 100px和min-width: 300px，最终元素宽度是300px，内容区会被反向压缩。
其次是替换元素，比如<img>和<input>。img标签的width和height默认作用于其替换内容，但box-sizing对它同样有效，设置border-box后图片会被边框和padding向内裁剪。表单控件在不同浏览器中的默认盒模型表现不一致，做跨浏览器样式统一时建议显式声明box-sizing。
最后是负margin。负margin会从计算结果中减去相应数值，比如margin-left: -10px会让元素向左偏移10px并使总占位宽度减少。它在某些圣杯布局、等高布局技巧中被用来调整位置，但由于计算结果违反直觉，调试时容易让人困惑，建议谨慎使用并配合注释说明意图。
总结一下：搞清楚盒模型，核心是记住两套公式——content-box下width只是起点，占位还要加上padding、border和margin；border-box下width就是最终视觉尺寸，padding和border向内消化。现代项目统一使用border-box，再配合百分比和calc，基本可以杜绝宽度溢出类的布局问题。理解了这些规则，写出来的尺寸才真正所见即所得。
css盒模型box-sizing元素宽度计算修改时间：2026-09-04 12:21:19