块级元素默认使用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; }）flex-gap、grid-gap）margin collapse 和 content-box 的隐式叠加，是 CSS 布局中最容易被忽略、也最难排查的组合陷阱。
