box-sizing: border-box使width/height表示总占位尺寸，即设定值等于内容区+padding+border之和，内容区自动收缩；而content-box下width仅指内容区，padding和border额外叠加导致实际尺寸膨胀。
box-sizing: border-box 让 width/height 表示“总占位尺寸”
默认的 content-box 模式下，width: 200px 只管内容区；加 padding: 10px 和 border: 2px 后，实际宽度变成 224px。这在响应式或栅格布局里极易导致溢出、换行、滚动条——尤其当多个元素并排时，总宽一不小心就超 100%。
border-box 把这个逻辑翻过来：width: 200px 就是最终占据的宽度，padding 和 border 全部从这 200px 里“扣掉”，内容区自动收缩。你设多少，它就占多少，没有意外。
全局设置 * { box-sizing: border-box; } 的真实代价
看似最省事的写法，但可能干扰某些依赖 content-box 的第三方组件：
- 旧版 Bootstrap 表单控件（如
input[type="text"]）在 IE 或 Safari 中对边框渲染有隐式假设 - Canvas 容器、SVG 内嵌元素、部分图表库（如 ECharts 的
canvas父容器）会因尺寸计算偏差导致裁剪或模糊 - 原生
textarea、select在某些浏览器中，border-box会让内部文字垂直对齐异常
更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
- 用
html { box-sizing: border-box; }设根节点 - 再补上
*::before, *::after { box-sizing: inherit; }确保伪元素行为一致 - 对已知不兼容的组件单独重置：
.chart-container canvas { box-sizing: content-box; }
Flex/Grid 中 border-box 如何影响空间分配
在 display: flex 或 display: grid 容器中，子项的尺寸基准直接影响剩余空间计算：
-
flex-basis: 50%在border-box下，padding 不会“吃掉”额外空间，比例更稳定 - 写
width: calc(50% - 1px)配合边框做两栏时，不用再手动减去padding和border像素值 - 但注意：
min-width: 200px仍以总宽为基准——如果 padding 很大，内容区可能被压缩到看不见文字 - DevTools 的“Computed”面板里显示的
width值仍是内容区宽度，不是总宽；而尺寸标注框（Layout 标签页）显示的是border-box总尺寸，别混着看
transition 动画中 border-box 的视觉陷阱
当你给一个 border-box 元素做 transition: padding 0.3s 时，width 不变，但内容区会缩放——文字可能突然变小、图标错位、行高抖动。
这不是 bug，而是模型本身的必然表现。解决方法有限且需权衡：
- 避免直接动画
padding或border-width，改用transform: scale()模拟内边距变化 - 若必须动
padding，配合font-size缓动来抵消内容区压缩感 - 对文字密集区域（如卡片标题、按钮），优先用
margin控制间距，padding仅用于微调内部留白
真正容易被忽略的，不是怎么设 border-box，而是它让“尺寸可控”这件事变得太顺滑，以至于开发者忘了：只要涉及 padding 或 border 的动态变化，内容区就在被动变形。
