默认css盒模型使width不包含padding和border，导致实际宽度超出；使用box-sizing: border-box可让width包含二者，推荐全局设置*{box-sizing:border-box}，并配合calc()、flex:1等避免溢出。
默认情况下，CSS盒模型会把 padding 和 border 算在元素的 width 之外，导致实际占用宽度 = width + padding × 2 + border × 2。当多个带内边距的盒子并排或嵌套时，很容易超出父容器，造成横向滚动或布局错位。
用 box-sizing: border-box 统一计算方式
这是最直接有效的解法：让 width 包含 padding 和 border，不再额外累加。
- 全局设置（推荐）：*, *::before, *::after { box-sizing: border-box; }
- 单个元素设置：.card { width: 300px; padding: 16px; border: 1px solid #ccc; box-sizing: border-box; } → 实际总宽就是 300px
- 注意：IE8+ 支持，无需前缀；flex/grid 子项默认行为已接近 border-box，但仍建议显式声明
合理控制 padding 与 width 的配合关系
即使用了 border-box，如果 width 设为 100% 且父容器有 padding 或 margin，仍可能因四舍五入或边框渲染差异轻微溢出。
- 子元素避免写死 100% 宽度，改用 flex: 1 或 max-width: 100%
- 父容器若设了 padding，子元素可用 width: calc(100% – 32px) 扣除左右 padding（如父 padding: 16px）
- 表单控件、按钮等常被忽略的元素，统一加 box-sizing: border-box 防止意外撑开
检查是否误用 display: inline-block 或浮动残留
盒模型问题有时是“假象”——实际由空白符、浮动未清除或行内元素基线对齐引发的视觉溢出。
立即学习“前端免费学习笔记（深入）”；
- inline-block 元素间的空格会被渲染为 4px 左右空白，可用 font-size: 0 在父级消除，子级再设回正常字号
- 浮动元素未清除会导致父容器高度塌陷，间接影响后续布局，记得加 clear: both 或用 BFC（如 overflow: hidden）包裹
- 用浏览器开发者工具的“布局叠加层”（Layout / Box Model 面板）直观查看每个盒子的真实尺寸和间距
基本上就这些。核心是统一用 box-sizing: border-box 建立可预期的尺寸逻辑，再配合合理的 width 计算与布局上下文判断，宽度溢出问题基本能根治。