content-box是w3c规定的默认盒模型，width/height仅指内容区尺寸，padding和border额外叠加；border-box则将padding和border纳入width/height计算，内容区自动压缩，布局更可控。
box-sizing: content-box 是默认行为，不是“遗漏”边框
很多人误以为标准盒模型“不包含边框”是设计缺陷或疏忽，其实恰恰相反：box-sizing: content-box 是 W3C 明确规定的默认语义：width 和 height 就是 content 区域的尺寸。边框、内边距这些属于“额外包裹层”，自然要叠加计算。这和现实中的测量逻辑一致——你买个 20cm × 15cm 的相框，不会指望它连木框厚度一起算进 20cm 里。
border-box 才是显式把边框纳入 width/height 控制范围
当你写 box-sizing: border-box，浏览器就按怪异盒模型解释：width 指的是“内容 + padding + border”的总宽，内容区会自动收缩腾出空间。这对布局更可控，尤其在栅格系统或固定容器中：
- 设置
width: 300px; padding: 10px; border: 2px solid #000;时，content-box下内容区仍是 300px，总占用宽度为 324px； - 而
border-box下内容区实际只剩 276px（300 − 10×2 − 2×2），但整个盒子严格占满 300px。
兼容性与全局重置的常见误判
很多项目一上来就写 * { box-sizing: border-box; }，以为“统一了就好”。但要注意：
- 表单控件（如
<input>、<textarea></textarea>）在某些旧版浏览器中对border-box渲染不一致，可能挤压文字或截断光标； - 第三方 UI 库（如早期 Bootstrap 3）内部样式依赖
content-box计算，强行全局覆盖可能导致按钮尺寸错乱； -
margin在两种模型下都不参与 width/height 计算，这点常被忽略——无论用哪种box-sizing，外边距始终是“额外加出来的”。
调试时怎么看当前生效的是哪种模型？
Chrome DevTools 的 Elements 面板里，选中元素后右侧的 Styles 标签页会高亮显示当前 box-sizing 值；更直接的是看 Computed 标签页里的 width 和 border-box width 两行数值是否相等：
- 若
width（Computed）=border-box width→ 实际走的是border-box； - 若
border-box width>width→ 说明有 padding/border 被额外加上，即content-box生效。
真正容易被忽略的，是 margin 始终游离于 box-sizing 控制之外——它永远不参与 width/height 的定义逻辑，只影响布局流中的位置和间距。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
