width和height在content-box下仅控制内容区尺寸，总宽=width+左右padding+左右border；border-box下则包含内容、padding和border，内容区自动收缩。
width 和 height 这两个属性到底管什么，就是本质区别——其他所有表现差异都从这里长出来。
box-sizing: content-box 时，width 只管 content 区域
你写 width: 200px，浏览器就真只给内容留 200px；padding: 15px 和 border: 3px solid 会额外往外撑，总宽变成 200 + 15×2 + 3×2 = 236px。offsetWidth 返回 236 是完全正常的，不是 bug。
- 常见错误现象：改了
padding，卡片突然溢出容器——大概率漏了box-sizing: border-box - 适用场景：需要精确控制内容区域尺寸，比如文字排版容器、canvas 容器
- JS 读取时：
getComputedStyle(el).width返回 "200px"，el.offsetWidth返回 236
box-sizing: border-box 时，width 管的是 content+padding+border
你写 width: 200px，浏览器就保证整个盒子（含内边距和边框）正好占满 200px；内容区自动收缩，比如 padding: 15px; border: 3px，那实际内容宽度只剩 200 − 15×2 − 3×2 = 164px。
- 常见错误现象：全局写了
* { box-sizing: border-box }，但input或textarea在 Safari 中文字被截断——原生表单控件对border-box响应不稳定 - 稳妥做法是：
* { box-sizing: border-box }+ 单独重置input, select, textarea, button { box-sizing: content-box } -
offsetWidth和写的width数值一致（忽略 margin），这是最直观的验证方式
怎么确认当前元素用的是哪种模型？
别只翻 CSS 文件，继承和层叠会让结果和你预期不一致。最可靠的是运行时查：
立即学习“前端免费学习笔记（深入）”；
- 在控制台执行：
getComputedStyle(el).boxSizing—— 返回"content-box"或"border-box" - 如果返回空字符串，说明没显式设置，按默认
content-box处理 -
el.style.boxSizing只读内联样式，容易漏掉外部规则，慎用
真正容易被忽略的点是：盒模型差异不会让样式“失效”，它只会让尺寸计算悄悄偏移——尤其在 calc(100% - 20px)、栅格列宽、或 JS 动态插入带 padding 的 DOM 时，偏差会被放大。验证不能只靠眼睛看，得用 offsetWidth 读真实像素值。
