标准盒模型下，元素总宽度为width+padding+border+margin；设置box-sizing: border-box后，width包含padding和border，padding不再增加总宽度。
在CSS盒模型中，元素的总宽度由 width、padding、border 和 margin 共同决定。你问的是 width 与 padding 如何计算，重点在于理解盒模型的类型。
标准盒模型（content-box）
默认情况下，CSS 使用的是标准盒模型。在这种模型下：
立即学习“前端免费学习笔记（深入）”；
- width 指的是内容区域（content）的宽度
- padding 是额外加在内容区域外的内边距
- 总占用宽度 = width + padding-left + padding-right + border-left + border-right
例如：
.box {
width: 200px;
padding: 10px;
border: 5px solid #000;
}
这个元素在页面中实际占据的宽度是：
200（width） + 10（左内边距） + 10（右内边距） + 5（左边框） + 5（右边框） = 230px
IE盒模型（border-box）
通过设置 box-sizing: border-box 可以切换到这种模型。在这种模型下：
立即学习“前端免费学习笔记（深入）”；
- width 包含了 content + padding + border
- 你设置的 width 就是元素最终在页面上占据的总宽度（不含 margin）
- padding 和 border 会向内“压缩”内容区域
同样的例子，但加上 box-sizing:
.box {
width: 200px;
padding: 10px;
border: 5px solid #000;
box-sizing: border-box;
}
此时元素总宽度就是 200px，内容区域会被压缩为：200 - 10 - 10 - 5 - 5 = 170px
如何选择？
现代开发中，很多开发者喜欢全局设置：
*, *::before, *::after {
box-sizing: border-box;
}
这样可以让 width 更直观——你设成 200px，它就在页面上占 200px，不用担心 padding 把布局撑开。
基本上就这些。关键记住：默认情况下 padding 会增加总宽度，除非用了 box-sizing: border-box。
