box-sizing: border-box 时，width/height 包含内容区、padding 和 border；浏览器自动压缩内容区以满足总尺寸，如 width: 200px、padding: 10px、border: 2px 时内容宽为 176px。
box-sizing: border-box 时 border 和 padding 怎么算尺寸
当 box-sizing 设为 border-box，元素的 width 和 height 指的是「内容区 + 内边距 + 边框」三者总和。也就是说，你写的 width: 200px，浏览器会把 padding 和 border 往里挤，自动压缩内容区宽度来腾出空间。
常见错误是以为设了 padding: 10px 和 border: 2px solid #000 后，内容区还能占满 200px —— 实际上内容区只剩 200 - 2×10 - 2×2 = 176px 宽。
- 这个计算由浏览器自动完成，无需手动减法
- 所有现代浏览器都支持
border-box，包括 IE8+ - 注意：
box-sizing不继承，子元素需单独设置或用通配符统一处理
box-sizing: content-box 是默认行为，但容易误判尺寸
这是 CSS 默认值，width 和 height 只管内容区，padding 和 border 额外加在外部。比如 width: 200px; padding: 10px; border: 2px，实际占用水平空间是 200 + 20 + 4 = 224px。
问题常出现在响应式布局中：父容器设了 width: 100%，子元素又加了 padding 或 border，结果溢出、换行、滚动条意外出现。
立即学习“前端免费学习笔记（深入）”；
- Flex/Grid 容器里的子项默认仍按
content-box解析尺寸，除非显式改写 -
min-width和max-width也只约束内容区，不受padding/border影响 - 用
outline替代border可避免尺寸干扰（因为outline不参与盒模型计算）
如何全局统一用 border-box 而不漏掉伪元素
很多人写 * { box-sizing: border-box; }，但这个选择器不匹配 ::before 和 ::after —— 它们会回退到默认的 content-box，导致样式错位，尤其在用伪元素做装饰边框或图标时。
正确写法必须显式包含伪元素：
*,
*::before,
*::after {
box-sizing: border-box;
}- IE8 不支持
::before/::after的双冒号写法，若需兼容，可加单冒号规则（但 IE8 本身已基本淘汰） - 某些重置库（如 normalize.css）不修改
box-sizing，不能依赖它帮你设好 - 第三方组件库（如 Element Plus）内部可能重设
box-sizing，需检查其 CSS 源码或覆盖样式
border-collapse 对 table 盒模型的影响常被忽略
表格元素（table、td、th）有自己的盒模型逻辑。border-collapse: collapse 会让相邻边框合并成一条线，此时 border 不再像普通块级元素那样各自占据空间 —— 它不增加单元格尺寸，也不参与 box-sizing 计算。
这意味着即使设了 box-sizing: border-box，td 的 width 依然只决定内容区，border 是“画上去”的，不挤内容。
-
border-collapse: separate（默认）下，border才真正参与盒模型，受box-sizing控制 - 想让表格列宽严格等于设定值？优先用
collapse+ 显式table-layout: fixed - 给
table元素设padding是无效的，只能作用于td/th
实际项目里最麻烦的不是记清规则，而是不同场景混用：flex 容器里嵌 table，又套了带 border 的 div，再加个伪元素装饰 —— 这时候每个层级的 box-sizing、是否塌陷、是否继承，都得单独确认。
