content-box 与 border-box 的本质区别在于 width/height 是否包含 padding 和 border：前者仅指内容区，后者指含 border 的总尺寸；margin 始终不参与 box-sizing 计算。
width 和 height 到底“算不算” padding 和 border —— 这就是 content-box 与 border-box 的唯一本质区别。
box-sizing: content-box 是浏览器默认行为，但 width 只管内容区
你写 width: 200px，浏览器就真只给内容区留 200px；padding: 16px 和 border: 2px 会额外加在两边，总宽变成 200 + 32 + 4 = 236px。
- 常见错误现象：
width: 100%的卡片加了padding: 16px后横向溢出父容器、栅格列突然换行 - 使用场景：极少数需要 JS 精确读取纯内容尺寸（比如 Canvas 绘图适配），或对接老系统强制依赖默认行为时才保留
- 参数差异：
getComputedStyle(el).width返回的就是你写的width值（内容区）；而offsetWidth返回的是真实总宽（含 padding + border）
box-sizing: border-box 让 width 真正代表“占多大地方”
你写 width: 200px，那这个盒子从左 border 到右 border 就是 200px；padding 和 border 全部向内挤，内容区自动收缩。
- 常见错误现象：全局加了
* { box-sizing: border-box }后，第三方 UI 库组件错位——因为库内部可能已设box-sizing: border-box，而你之前混用了content-box，导致盒模型不一致 - 实操建议：新项目直接在 CSS 入口加
* { box-sizing: border-box }；老项目优先从表单、卡片等高频模块开始显式覆盖 - 性能影响：零运行时开销，纯渲染阶段的计算逻辑切换，IE8+ 全支持，移动端无顾虑
margin 始终游离在外，box-sizing 完全不管它
box-sizing 只控制 content/padding/border 三层关系，margin 永远是盒子外部的空间，不参与任何尺寸计算。
- 容易踩的坑：写
width: 300px; margin: 20px;，误以为占位是 300px，实际水平空间是 300px + 40px，常导致横向滚动或布局错位 - 调试技巧：用开发者工具 hover 元素时，最外层虚线框才是真实占位边界，那里面才包含
margin - 关键提醒：如果页面里有 JS 依赖
offsetWidth做动态列宽或弹窗定位，切到border-box后数值会突变（比如从 224 变成 200），必须同步检查并调整 JS 逻辑
真正难的不是记住定义，而是意识到：一旦混用两种模型，width 的语义就分裂了——同一行 CSS，在不同上下文里代表完全不同的物理尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
