根本原因在于box-sizing属性取值不同：content-box下width仅指内容宽，总宽=width+padding×2+border×2；border-box下width包含内容、内边距和边框。
CSS中同样设置width: 200px，但元素实际占位宽度却不一样，根本原因在于盒模型（box model）的计算方式不同——尤其是box-sizing属性的取值差异。
box-sizing 决定 width 算什么
默认情况下，浏览器使用content-box（W3C标准盒模型），此时width仅代表内容区宽度，不包含padding和border。而设为border-box时，width表示整个盒子的总宽度（内容+内边距+边框）。
-
box-sizing: content-box：width = 内容宽度；总宽 = width + padding×2 + border×2 -
box-sizing: border-box：width = 内容区 + padding + border 的总和；内容区会自动压缩
常见导致不一致的场景
不同元素或不同上下文可能隐式继承/重置了box-sizing：
- 某些UI库（如Bootstrap）全局设
*, *::before, *::after { box-sizing: border-box; }，而你的自定义样式没同步 - 表单控件（
input、textarea）在部分浏览器中默认是content-box，且不易被重置 - 重置样式（reset.css）或规范化样式（normalize.css）对
box-sizing处理不统一
快速排查与统一方案
打开开发者工具，选中元素，在“Computed”面板里直接查看box-sizing的实际值，再对比width、padding、border和最终渲染宽度（“Layout”或“Box Model”视图）。
立即学习“前端免费学习笔记（深入）”；
- 统一声明：
* { box-sizing: border-box; }（建议放在CSS最前面） - 对特殊元素单独校准，比如：
input, select, textarea { box-sizing: border-box; } - 避免混用：不要在一个容器内同时依赖
content-box和border-box做等宽布局
验证是否生效的小技巧
给两个并排元素都设width: 100px; padding: 10px; border: 2px solid #000;，然后观察它们是否等宽：
- 若一个明显更宽 → 它大概率是
content-box - 若两者视觉宽度一致 → 都是
border-box或至少计算逻辑对齐
