box-sizing: border-box使width包含padding和border，总宽严格等于声明值；默认content-box下width仅指内容区，总宽=width+左右padding+左右border。
因为默认的 box-sizing: content-box 把 width 只算内容区，padding 和 border 额外加在外部——这不是 bug，是规范行为。
width: 200px + padding: 10px 真实占宽是 220px
你写 width: 200px; padding: 10px;，浏览器按标准盒模型计算：内容区宽 200px，再加左右各 10px 内边距 → 实际总宽 220px。如果父容器刚好 200px 宽，子元素就会溢出、换行或触发横向滚动。
- 常见翻车场景：
width: 100%的子元素加了padding，立刻超宽 -
flex子项设width: 200px后又加padding，挤压兄弟元素 - 栅格里用
calc(50% - 16px)对齐，结果padding又额外加了空间
怎么让 width 真正等于“总宽度”
改用 box-sizing: border-box，width 就包含 padding 和 border，内容区自动压缩。
- 全局启用最稳：
* { box-sizing: border-box; }（注意：对table、inline元素无效） - 单个元素覆盖：
div { box-sizing: border-box; width: 200px; padding: 10px; }→ 总宽严格 200px -
min-width和max-width同样走border-box规则，别只改width忘了它们
为什么开发者工具里看到的 “Width” 不等于你写的 width
浏览器 DevTools 的 “Computed” 面板显示的是最终渲染总宽（content + padding + border + margin），而你写的 width 值只出现在 “Styles” 里。两者不一致，往往是因为没意识到 box-sizing 的影响。
- 检查 “Computed” → “Box sizing” 一栏，确认是
content-box还是border-box - 若为
content-box，再看 “Total width” 是否明显大于你声明的width -
margin始终不参与盒模型计算，两种模式下行为一致，不用调整
表格、图片、inline 元素这些例外要单独处理
table 默认用 table-layout: auto，width 和 max-width 基本失效；<img> 是替换元素，天然支持 width；span 等 inline 元素默认忽略 width。
- 表格要响应式收缩：先设
table-layout: fixed，再配width: 100%和max-width: 800px - 让
inline元素响应宽高：加display: inline-block或display: block -
box-sizing对inline元素无效，只对块级和替换元素（如input、img）生效
真正麻烦的不是记不住规则，而是改了 width 却没同步检查 box-sizing、padding 和父容器限制——三者只要漏一个，宽度就不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
