box-sizing默认content-box导致width不等于实际占位宽，需全局设border-box；margin折叠取相邻块级元素较大值，父子间也发生；padding延伸背景，border不继承背景；flex中margin:auto可交叉轴居中。
box-sizing 默认值让 width/height 不等于“你看到的盒子宽”
你写 width: 300px; padding: 15px; border: 2px solid #333;，浏览器默认按 box-sizing: content-box 解释——那这个元素实际占位宽度是 300 + 15×2 + 2×2 = 334px。不是“设了 300 就占 300”，而是“内容区刚好 300，边框和内边距额外加进去”。这在栅格布局、卡片并排、表单控件对齐时极易导致换行或溢出。
实操建议：
– 全局重置必须包含伪元素：* { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; }
– 别只给 div 设，input、textarea、button 默认仍是 content-box，漏掉就会出现“输入框比旁边 div 宽 4px”的诡异错位
– IE8+ 支持 border-box，无需前缀；但旧版 Safari 需加 -webkit-box-sizing
margin 折叠不是 bug，是块级流的自然行为
两个相邻 <p></p>：一个 margin-bottom: 20px，下一个 margin-top: 30px，它们之间实际间距是 30px，不是 50px。这不是计算错误，而是浏览器对垂直外边距的合并规则——取较大值，仅发生在普通流中的块级元素之间。
容易踩的坑：
– 父子间也会折叠：父元素没 border、没 padding、第一个子元素又设了 margin-top，结果整个父容器被往下顶（俗称“margin 穿透”）
– display: inline-block、float、position: absolute、flex 子项不参与折叠，所以用这些方式“绕开”反而会破坏一致性
– 快速验证：开发者工具 → Computed → 看父元素的 margin-top 是否显示为子元素的值
padding 和 border 影响背景与尺寸，但行为不同
padding 是透明区域，但背景色（background-color 或 background-image）会延伸覆盖它；border 是视觉边界，有颜色和样式，但默认不继承背景。两者都增加元素总尺寸（在 content-box 下），但作用位置不同：padding 在内容与 border 之间，border 在 padding 外围。
实操建议：
– 想让按钮文字离边框更“呼吸”，优先调 padding，而不是靠 margin 推开其他元素
– 给容器加 border: 1px solid transparent 是解决 margin 穿透的最小干预手段，既阻止折叠，又不改变视觉
– background-clip: padding-box（默认值）确保背景不画到 border 区域；若想让背景盖满 border，得设 background-clip: border-box
flex 容器里，padding/border/margin 的意义被重新定义
一旦父元素设了 display: flex，子元素变成 flex item，它的 width 就只是 flex-basis 的 fallback；margin: auto 可以在交叉轴居中（比如垂直居中），这是普通流做不到的；而 padding 和 border 仍按盒模型计算，但不再影响 flex 分配逻辑。
立即学习“前端免费学习笔记（深入）”；
关键区别：
– justify-content 对齐主轴（flex-direction: row 时为水平）
– align-items 对齐交叉轴（row 时为垂直）
– 单个子项想单独居中？用 align-self: center，别改容器属性
– margin 在 flex 中依然生效，且 auto 值可吃掉剩余空间，实现“左侧固定、右侧自动撑满”这类经典布局
最常被忽略的一点：盒模型不是静态图纸，它是浏览器实时计算的渲染链路。padding 和 border 看似只是“加点空隙”，但在响应式断点、字体缩放、高 DPI 屏幕下，它们会放大尺寸误差；而 margin 折叠这种隐性行为，只有在 DOM 结构变化（比如动态插入元素）时才会突然暴露——调试时别只盯着 width，要打开开发者工具的 Layout 面板看真实盒尺寸。
