<p>content-box下width/height仅含内容，总宽=内容宽+2×padding+2×border；border-box下width/height包含内容、padding和border，总宽恒为设置值，推荐全局使用 , ::before , *::after { box-sizing: border-box; }。</p>
设置的 width 和 height 是否包含 padding 与 border，是两者唯一且决定性的区别。
content-box 是浏览器默认行为，但容易撑破布局
它让 width 只管内容区，padding 和 border 全部额外加在外部。比如：
.demo {
width: 200px;
padding: 16px;
border: 2px solid #333;
box-sizing: content-box; /* 默认值，可省略 */
}这个元素实际占宽是 200 + 16×2 + 2×2 = 236px。你设了 200px，结果它硬生生变宽了 36px——在栅格、Flex 或 Grid 容器里，这大概率导致换行或溢出。
- 仅适合极少数需精确控制内容尺寸的场景（如某些文本流排版）
- 所有现代 UI 框架（Bootstrap、Tailwind、Ant Design）都默认覆盖掉它
- 设计稿标注的「组件宽度」永远是外框尺寸，
content-box天然对不上
border-box 让 width/height 真正代表“占多少空间”
你写 width: 200px，那它就稳稳占据 200px，padding 和 border 向内挤压内容区：
立即学习“前端免费学习笔记（深入）”；
.demo {
width: 200px;
padding: 16px;
border: 2px solid #333;
box-sizing: border-box;
}此时内容区只剩 200 − 16×2 − 2×2 = 164px 宽，但整个盒子还是 200px —— 这正是你拖动 Figma 量尺时看到的数字。
- 响应式布局中，加
padding不会破坏flex: 1或grid-column: span 2的分配逻辑 - 按钮、输入框、卡片等交互组件，尺寸必须稳定，否则 hover 或 focus 时边框变色会引发跳动
- 不手动算总宽，也不用为每个带边框的元素单独重写
width
全局设置 border-box 必须覆盖伪元素
只写 * { box-sizing: border-box; } 是不够的——::before 和 ::after 是独立渲染节点，会被漏掉，导致伪元素尺寸计算异常（比如 tooltip 箭头偏移、loading 动画错位）。
正确写法是：
*,
*::before,
*::after {
box-sizing: border-box;
}- 这条规则建议放在所有 CSS 的最顶部，作为项目第一行样式
- 不要用
html或body选择器替代，它们无法影响伪元素 - 即使使用 CSS-in-JS 或 Shadow DOM，也要确保该规则透传到对应作用域
真正难的不是理解区别，而是当某个第三方组件突然回退到 content-box（比如某些富文本编辑器的内联样式），或者调试时发现某处 box-sizing 被更高优先级规则覆盖——这时候得靠 computed 面板逐层检查，而不是凭感觉猜。
