box-sizing的content-box使width/height仅含内容区，border-box则让width/height包含padding和border；margin和padding在两种模式下均有效且行为不变，但border-box会压缩内容区宽度。
box-sizing 的两个取值怎么影响 width/height 计算
默认情况下，box-sizing 是 content-box，这意味着你写的 width: 200px 只算内容区宽度，加上 padding 和 border 后，元素实际占位会变宽。换成 border-box 后，width 就是整个盒子的总宽，padding 和 border 会向内压缩内容区。
常见错误现象：给多个并排元素设了相同 width 和 padding，结果换行或错位——大概率是没统一设 box-sizing: border-box。
-
content-box：width = content width；height = content height -
border-box：width = content + padding + border；height 同理 - IE8+ 支持，移动端无兼容问题，建议全局重置：
*, *::before, *::after { box-sizing: border-box; }
margin 和 padding 在 border-box 下还起作用吗
起作用，而且行为完全不变。box-sizing 只管 width 和 height 怎么解释，不影响 margin（外边距）和 padding（内边距）本身的定义和渲染逻辑。
使用场景：做响应式卡片时，用 border-box 配合固定 width: 100%，再加 padding: 16px，内容不会撑破容器；但 margin: 10px 仍会把卡片彼此推开，不影响布局流。
立即学习“前端免费学习笔记（深入）”；
-
margin始终在盒子外部，不受box-sizing影响 -
padding始终在 border 内侧、content 外侧，只是当box-sizing: border-box时，它会“吃掉”一部分你声明的width - 如果同时设
width: 200px、padding: 20px、border: 2px solid且box-sizing: border-box，内容区实际只有200 - 40 - 4 = 156px
为什么 flex 或 grid 容器里的子项常忽略 box-sizing
因为 flex 和 grid 的尺寸分配机制优先基于主轴剩余空间和 flex-basis / grid-template-columns，width 声明可能被覆盖。此时即使设了 box-sizing: border-box，也容易误以为“没生效”。
典型表现：一个 flex: 1 的子项写了 width: 300px 和 padding: 10px，但看起来没留内边距——其实是 flex-basis 默认为 auto，width 被忽略，padding 却还在，导致内容挤压。
- 解决办法：显式写
flex: 1 1 300px或flex-basis: 300px，再配合box-sizing: border-box - grid 中同理，避免只靠
width控制列宽，改用grid-template-columns: 1fr minmax(300px, 1fr)) - 调试时可用浏览器开发者工具的“Layout”面板，看 computed width 是否包含 padding/border
margin 折叠只发生在 content-box 下吗
不是。margin 折叠（collapsing）和 box-sizing 完全无关，它是 CSS 规范里独立定义的布局行为，只跟块级盒模型的相邻关系、是否建立 BFC 等有关。
容易踩的坑：以为把父容器设成 border-box 就能阻止子元素 margin 穿透，其实不行。例如子元素 margin-top: 20px 仍可能顶到父容器顶部——这不是 box-sizing 能控制的。
- margin 折叠发生在：相邻兄弟元素之间、父元素与第一个/最后一个子元素之间（当父元素没 border/padding、没 BFC 触发条件时）
- 阻止方法：给父元素加
padding: 1px、border: 1px solid transparent，或设overflow: hidden（触发 BFC） -
box-sizing不参与这个过程，别指望它解决 margin 折叠问题
实际项目中，box-sizing: border-box 是基础习惯，但 margin 行为、flex 尺寸逻辑、折叠规则这些才是更常出问题的地方。别只盯着 width 计算，多看 computed 样式里各项的实际值。
