元素实际宽度超设置值主因是box-sizing默认为content-box，此时width仅含内容区；改用border-box后width包含content+padding+border；需排查min-width/max-width、flex收缩、未重置margin及transform缩放干扰。
元素实际宽度比设置的 width 大？先查 box-sizing
绝大多数“明明设了 width: 200px，但元素占位却超过 200px”的问题，根源不在 margin 或 padding 写错了，而是 box-sizing 默认值是 content-box —— 此时 width 只管内容区，padding 和 border 会额外加进去。
box-sizing: border-box 是最常用的修复方式
把盒模型改成 border-box 后，width 就代表整个元素的总宽度（含 content + padding + border），更符合直觉，也方便响应式布局。
- 全局重置推荐写法：
*, *::before, *::after { box-sizing: border-box; } - 只对特定元素生效：
.input-field { width: 100%; padding: 8px; border: 1px solid #ccc; box-sizing: border-box; } - 注意：IE8+ 支持
box-sizing，但 IE7 及更早版本不支持（已基本可忽略）
为什么有时候改了 box-sizing 还不对？检查这些地方
即使用了 border-box，宽度仍异常，大概率是其他 CSS 干扰了计算：
-
min-width或max-width覆盖了width（尤其在 flex / grid 容器中） - 父容器设置了
display: flex且子项没加flex-shrink: 0，导致被压缩或撑开 - 存在未重置的
margin（比如浏览器默认的body或ul外边距） - 使用了
transform: scale()等视觉缩放，不影响 layout width 但影响渲染尺寸，容易误判
调试时用开发者工具看真实尺寸
Chrome / Firefox 的元素检查器里，选中元素后右侧“Computed”面板会显示 width、padding、border、margin 的具体数值；上方的尺寸图示（Layout 面板）能直观看到 content/padding/border/margin 四层占比 —— 这比靠猜快得多。
立即学习“前端免费学习笔记（深入）”；
特别注意：如果图示中 padding 或 border 显示为非零但你没写，可能是继承自用户代理样式（user agent stylesheet）或某个通用选择器（如 input { padding: 2px; }）。
