默认 width 不包含 padding，即 content-box 模型下 width 仅指内容区宽度；启用 border-box 后 width 包含 padding 和 border，现代项目常全局重置为 border-box 以避免溢出问题。
默认情况下，width 不包含 padding
这是 CSS 标准盒模型（box-sizing: content-box）的默认行为：你写的 width: 200px 就只是内容区（content）的宽度。只要加了 padding 或 border，元素实际占位就会变宽——不是“意外”，而是设计如此。
- 常见错误现象：给一个
width: 100%的容器加了padding: 16px，结果内容溢出或横向滚动条出现 - 原因：100% 是父容器内容区宽度，
padding额外加在它外面，总宽 > 100% - 实操建议：若需“撑满又不溢出”，必须显式减去 padding，比如用
calc(100% - 32px)（左右各 16px）
box-sizing: border-box 才让 width 包含 padding 和 border
启用这个属性后，width 指的是从左 border 边到右 border 边的总宽度，padding 和 border 全部向内“挤”内容区，不再撑大盒子。
- 使用场景：栅格系统、卡片、表单控件等需要严格控制尺寸的组件
- 参数差异：
content-box（默认） vsborder-box（需手动设置） - 兼容性影响：所有现代浏览器完全支持；IE8+ 也支持，无风险
全局重置是现代项目的标配做法
没人想每次写 div 都手动加 box-sizing: border-box。行业通用解法是统一重置：
*,
*::before,
*::after {
box-sizing: border-box;
}-
为什么这样做：避免子元素继承父元素的
box-sizing意外失效（例如某些框架组件会覆盖） - 容易踩的坑：重置后，第三方 UI 库若依赖
content-box行为（极少见），可能需局部覆盖回content-box - 注意：
margin始终不参与width计算，无论哪种盒模型
调试时怎么看实际占用宽度？
别靠猜。打开浏览器开发者工具，选中元素，在「Computed」面板里找 width 和 border-box size ——后者显示的就是真实渲染宽度（含 padding + border），和你设置的 width 对比，立刻知道当前用的是哪种模型。
立即学习“前端免费学习笔记（深入）”；
- 如果「Computed width」明显大于你写的
width值，说明还在用默认content-box - 如果「border-box size」和你写的
width一致，且padding和border数值已计入，则生效了 - 最常被忽略的一点：
font-size、line-height等会影响内容区高度，但不影响width计算逻辑
