<p>box-sizing: border-box 可使宽高包含内边距和边框，避免 content-box 下因 padding 和 border 导致的尺寸溢出；全局设置 { box-sizing: border-box; } 或更稳妥的 , ::before, ::after { box-sizing: border-box; } 即可统一行为。</p>
直接把所有元素设为 box-sizing: border-box，就能让宽高包含内边距和边框，彻底避开传统 content-box 下的尺寸计算混乱。
为什么默认的 content-box 容易出错
浏览器默认用 content-box：你写 width: 200px，实际占用空间 = 内容区 200px + padding + border。加了 10px 内边距和 2px 边框，元素总宽就变成 224px，布局很容易撑破容器或错位。
一行代码全局统一
在 CSS 开头加上这段重置规则：
* {
box-sizing: border-box;
}
/* 或更稳妥地（排除某些替换元素） */
*, *::before, *::after {
box-sizing: border-box;
}这样所有元素——包括 div、input、textarea、button——都按“所见即所得”方式计算尺寸：设定的 width/height 就是最终渲染的总宽度/高度。
立即学习“前端免费学习笔记（深入）”；
border-box 下的尺寸逻辑很直观
假设一个盒子设置为：
width: 300px; padding: 15px; border: 2px solid #ccc;
它最终占满的水平空间就是 300px，内容区自动压缩为 300 - 2×15 - 2×2 = 266px。你不再需要手动减去 padding 和 border 来凑尺寸。
注意个别场景仍需微调
- 某些表单控件（如原生 select、radio）在部分浏览器中可能对
box-sizing响应不一致，可单独加height或line-height对齐 - 使用
max-width: 100%的响应式图片或嵌入内容，通常不受影响，但若父容器 padding 大，建议配合width: 100%确保填满可用空间 - 动画或 JS 动态读取
offsetWidth时，值会更符合视觉预期，无需再做 padding/border 补偿计算
