css盒模型width与padding如何计算

标准盒模型下，元素总宽度为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。