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; 的 <p> 后接 margin-top: 30px; 的 <div>，它们之间实际间距是 30px，不是 50px。
- 折叠只影响渲染间距，不影响 DOM 结构或 JavaScript 获取的
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 的尺寸干预，可显式设
flex: none（即flex: 0 0 auto） - 调试时用浏览器开发者工具的“Layout”面板，比肉眼数像素更可靠
盒模型不是画个示意图就完事的概念——它直接决定你写的每个像素是否出现在预期位置。最常被忽略的是 box-sizing 的默认行为和 margin 折叠的隐式触发，这两个点几乎贯穿所有布局问题。
