块级元素默认使用content-box盒模型且垂直margin会合并；width/height仅作用于内容区，实际尺寸含padding和border；相邻块级元素垂直margin取较大值而非相加；默认width为auto、height由内容撑开；需统一box-sizing: border-box并慎用margin合并。
块级元素默认使用 content-box 盒模型
所有块级元素（如
、
）在未显式设置 box-sizing 时，都采用 content-box 模式。这意味着你写的 width 和 height 仅作用于内容区域，不包含 padding 和 border。
比如：width: 200px; padding: 10px; border: 2px solid #000;，该元素实际占据的水平空间是 200 + 10×2 + 2×2 = 224px。这个“额外扩张”常导致布局错位，尤其在栅格或 flex 容器中。
margin 会触发外边距合并（collapsing margins）
相邻块级元素的垂直 margin（上下方向）可能合并，取其中较大者，而不是相加。这仅发生在普通文档流中的块级盒之间，且没有 border/padding/separating content 隔开。
- 父子间：父元素无
border、padding、inline content时，子元素的上/下margin会“溢出”到父元素外边距 - 兄弟间：两个
margin-bottom: 20px和margin-top: 30px，实际间距是30px，不是50px - 空块级元素：自身
margin-top和margin-bottom也会合并为一个值
width/height 默认不生效于内在尺寸内容
块级元素默认宽度撑满父容器（width: auto），高度由内容撑开（height: auto）。此时你设 width: 100% 通常等效，但一旦加了 padding 或 border，又没改 box-sizing，就容易超宽。
立即学习“前端免费学习笔记（深入）”；
常见误操作：
.card { width: 100%; padding: 16px; border: 1px solid #ccc; }这个 .card 在窄屏下极易横向溢出——因为 100% + 32px + 2px > 父容器宽度。
display: block 元素天然独占一行且无视 white-space
块级元素默认会换行渲染，前后自动换行，不响应父级的 white-space: nowrap（除非显式设 display: inline-block 或 Float）。它的盒模型结构始终按“内容 → 内边距 → 边框 → 外边距”从内向外堆叠，但外边距行为受上下文影响极大。
真正要稳定控制尺寸和间距，必须：
- 统一加
box-sizing: border-box到全局重置（推荐写在* { box-sizing: border-box; }） - 避免依赖 margin 合并来实现间距，改用 padding 或 gap（如
flex-gap、grid-gap） - 调试时善用浏览器开发者工具的“Layout”面板，它会清晰标出 content/padding/border/margin 四层尺寸
盒模型看着简单，但 margin collapse 和 content-box 的隐式叠加，是 css 布局中最容易被忽略、也最难排查的组合陷阱。