box-sizing 默认值是 content-box，width/height 仅指内容区尺寸，实际宽度=内容宽+左右padding+左右border；margin 折叠使相邻块级元素垂直外边距取较大值而非相加。
box-sizing 默认值是 content-box，不是你看到的“整个方块”
浏览器默认把 width 和 height 解释为内容区尺寸，不包含 padding 和 border。这意味着写 width: 200px; padding: 10px; border: 5px solid black; 的元素，实际占位宽度是 200 + 10×2 + 5×2 = 230px。很多人调样式时发现“明明设了 200，怎么撑出 230”，就是卡在这儿。
- 想让
width指代“边框外沿总宽”，统一加box-sizing: border-box; - 全局重置推荐写法：
* { box-sizing: border-box; } -
box-sizing不继承，但用通配符设置后，所有元素（含伪元素）都生效 - 注意：IE8+ 支持，无需前缀；旧版 Safari 需要
-webkit-box-sizing
margin 折叠只发生在普通流中的块级元素垂直方向
两个相邻块元素的上下 一旦父元素设了 立即学习“前端免费学习笔记（深入）”； 盒模型不是画个示意图就完事的概念——它直接决定你写的每个像素是否出现在预期位置。最常被忽略的是 margin 会合并成一个，取较大值，而不是相加。比如 margin-bottom: 20px; 的 后接 margin-top: 30px; 的 30px，不是 50px。
offsetTop 等值display: inline-block 或 flex 容器子项不参与折叠padding、border，或触发 BFC（如 overflow: hidden）内联元素的 width/height 失效，但盒模型依然存在
span、a 这类默认 display: inline 的元素，设 width 或 height 无效，看起来像“没盒模型”。其实它有完整的盒模型，只是尺寸由内容决定，且 margin 仅左右生效，上下被忽略（但 vertical-align 会影响布局位置）。
width/height，必须改 display：比如 inline-block、block 或 flex
line-height 控制内联元素的“行内高度”，常用来垂直居中单行文本display: inline-flex 可保留行内流特性，同时获得 flex 布局能力flex 容器下，子元素的盒模型行为被重新定义
display: flex，子元素（flex item）的 width/height、margin、甚至 min-width 都可能被 flex 算法覆盖。例如 flex: 1 会让元素拉伸填满剩余空间，此时写的 width 就只是“基准值”，不是最终结果。
flex-basis 才是 flex item 主轴上的初始尺寸，它替代了传统 width 的作用（主轴为水平时）margin: auto 在 flex 容器里可实现真正的居中（包括垂直），这是普通流做不到的flex: none（即 flex: 0 0 auto）box-sizing 的默认行为和 margin 折叠的隐式触发，这两个点几乎贯穿所有布局问题。
