content-box是w3c标准盒模型的默认行为，width仅指内容区宽度，padding和border向外撑开总尺寸；border-box更符合直觉布局，width包含border和padding，现代项目普遍采用并推荐全局重置为border-box。
因为这是W3C标准盒模型（box-sizing: content-box）的原始定义，width仅指content区域的宽度，padding和border默认向外“撑开”总尺寸。这不是bug，是设计选择——早期CSS把内容区作为可控核心，边距和边框视为附加装饰。但现实布局中，它常导致意外溢出，所以现代项目几乎都切换到border-box来规避。
content-box 是默认行为，不是“错误”
当你写 width: 200px，浏览器就真的只给内容区分配200px；如果再加 padding: 10px 和 border: 2px solid，元素实际占位是 200 + 20 + 4 = 224px（左右padding共20px，左右border共4px）。这个计算逻辑在所有现代浏览器中完全一致，属于可预测的规范行为。
- 常见错误现象：
width: 100%的容器加了padding: 16px，结果横向滚动条出现或子元素换行 - 原因：100% 是父容器 content 宽度，padding 是额外加在它外面的，总宽 > 100%
- 不要指望浏览器“自动理解你要撑满”，它只按规则执行
border-box 才符合直觉式布局
box-sizing: border-box 让 width 指的是“从左border边缘到右border边缘”的总宽。此时 padding 和 border 向内压缩 content 区，不再撑大盒子。
- 示例：
width: 200px; padding: 10px; border: 2px solid;在border-box下，content 区实际只有200 - 20 - 4 = 176px - 兼容性无顾虑：IE8+、所有现代浏览器均原生支持，只需加前缀（如
-webkit-box-sizing）即可覆盖旧版 Safari/Android - 全局重置推荐写法：
* { box-sizing: border-box; }或更安全的*, *::before, *::after { box-sizing: border-box; }
calc() 和 box-sizing 别混用
calc() 只是算一个长度值，不改变盒模型类型。你在 content-box 下写 width: calc(100% - 20px)，减掉的仍是 content 区宽度；若同时设了 padding: 10px，总宽还是 calc(100% - 20px) + 20px = 100% —— 看似绕一圈又回来了。
- 容易踩的坑：在
border-box下还手动用calc(100% - 20px)减 padding，结果 content 区被双重压缩 - 正确做法：选一种模型就贯彻到底。用
border-box就别再手动减；用content-box就必须用calc()补偿 padding/border - 注意：margin 始终不参与 width 计算，无论哪种
box-sizing
真正麻烦的不是理解规则，而是在混合老代码、第三方组件或内联样式时，box-sizing 被局部覆盖却没被察觉——一个 div 突然变宽，往往不是它自己写的 width 有问题，而是它的某个祖先或自身被悄悄设回了 content-box。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
