CSS学习笔记5：CSS 盒模型 & Margin 注意事项
前言
这个博客是一个重点，大致梳理一下 CSS 的盒子模型（box model）以及围绕 margin 的各种坑
CSS 的盒子模型
CSS将每一个被修饰的对象都看作一个BoundingRect渲染，其中：每个块级元素在 CSS 中由四层构成（从内到外）：
- content（内容）
- padding（内边距）
- border（边框）
- margin（外边距）
默认 box-sizing: content-box ------ width/height 指的是 content 的大小；padding 和 border 会额外增加总尺寸。可以的话，可以打开浏览器，一般就能看到盒子模型的示意图。
css
/* 推荐：全局使用 border-box，更直观 */
*,
*::before,
*::after { box-sizing: border-box; }border-box 下，width 包含 padding 和 border，更方便布局和避免溢出。
margin 的"合并"（Adjacent Margins）
当两个相邻的块级元素 （siblings）都有垂直外边距（margin-top / margin-bottom），浏览器并非把它们相加，而是合并为一个值 ，具体行为通常为取两者的较大（或更负的）值。例如：
html
<div class="a" style="margin-bottom: 30px;"></div>
<div class="b" style="margin-top: 20px;"></div>两者之间的间距不是 50px，而是 30px （取较大者）。如果其中一个是负值（例如 -10px），合并规则也会按数学规则取最大（对负值而言是"更不小"的那个），所以结果可能是减小或抵消间距，注意负值可能带来重叠和意外行为。
margin 的"塌陷"（Collapsing Margins）
什么是塌陷
父元素与其首个子元素（或最后一个子元素）的垂直 margin 可以"塌陷"为一个值" ------ 即父元素顶部的 margin-top 与第一个子元素的 margin-top（在没有其他阻止因素时）不会叠加，而是表现为单一的空隙（常取两者中较大者）。常见导致"看起来父元素没内边距而子元素与外部元素有间隔"的问题基本都是这个。
html
<div class="parent" style="background:#eee;">
<h1 style="margin: 20px 0;">标题</h1>
<p>内容</p>
</div>你可能期望父容器 .parent 的背景紧贴标题上方，但因为 h1 的 margin-top 与父的 margin-top 发生塌陷，最终看起来 .parent 与前面的元素之间出现了间隙，背景并没有被"顶出"。
垂直 margin 会塌陷（parent-child 或相邻兄弟）当且仅当满足一系列条件，例如：
- 两个参与塌陷的元素都在 normal flow（普通流） 中（不是浮动、不是绝对定位）。
- 父元素没有形成新的 BFC（Block Formatting Context）
- 父元素本身没有
border、没有padding（在相应边）、没有行内内容（text）、以及没有clearance或overflow被设置为非visible等。
如何阻止塌陷（实用方法：按优先级列举）
目标：让父与子保持各自的间距（不被合并）
常用方法（任选其一或多个）：
给父元素添加 padding（最直接）
css
.parent { padding-top: 1px; /* 或者更合理的值 */ }这种方式简单、直观但是吧，一些眼睛尖的人会觉得不舒服：因为会改变内边距占用的空间（若只想视觉效果可用 1px 或 transparent border）。
给父元素添加 border（甚至透明）
css
.parent { border-top: 1px solid transparent; }这会阻止 margin 塌陷且不会改变视觉（如果使用透明色）。
为父元素创建 BFC（Block Formatting Context）
常见做法：
css
.parent { overflow: auto; /* 或 hidden, scroll */ }
/* 或者 */
.parent { display: flow-root; } /* 语义上是创建 BFC 的新方式 */BFC 会阻止父子 margin 发生塌陷，而且还能解决许多浮动引起的高度塌陷问题（下面会提到）。
将父元素设为 flex/grid 容器
css
.parent { display: flex; /* 或 display: grid; */ }flex 和 grid 的子项不会与父的 margin 发生塌陷（注意：这也会改变布局行为）。
让子元素不是块级流（比如设置 display:inline-block 或 让其定位）
css
.child { display: inline-block; }
/* 或 */
.child { position: relative; top: 0; } /* 绝对定位或相对定位也会打断塌陷 */但这些会改变子元素的布局特征，需谨慎使用。
插入行内内容（例如：空白的伪元素）
css
.parent::before { content: ""; display: table; }
/* 也可以 display:block; height:0; but display:table 更常用 */这会在父内创建一个非空内容，阻止塌陷（虽然比较 hacky）。
与 float、清除（clear）、以及 BFC 的关系
浮动（float）导致父高度塌陷
如果父容器内部全部子元素都是 float 的，父容器不会自动包裹高度（因为浮动元素脱离普通流）。这与 margin 塌陷不同，但常被混淆（表现为父高度为 0）。
解决办法（清除浮动）：
- 给父元素设置
overflow: auto;/hidden;（创建 BFC，使父包裹浮动子元素）； - 使用 clearfix（伪元素）：
css
.clearfix::after {
content: "";
display: table;
clear: both;
}display: flow-root;（现代且语义明确）：
css
.parent { display: flow-root; }BFC 的强大能力
创建 BFC 的方式（常见）：
overflow属性不是visible（如overflow: auto;）display: flow-root;float（使该元素自身变成浮动）position: absolute/fixed（也会创建新的 BFC，但会带来定位行为）display: inline-block/display: table/display: flex/grid（不同场景下会影响布局）
BFC 的效果：
- 阻止子元素 margin 与父元素发生塌陷；
- 父会包含浮动子元素（解决高度塌陷）；
- BFC 内的元素的 margin 与外部不发生塌陷（边界清晰）。
debug 技巧（如何快速定位 margin/塌陷/溢出问题）
- 用浏览器 DevTools 的 Box Model 视图：查看 margin/padding/border/size，直接看到哪些 margin 为 0，哪些有值。
- 临时加背景色或 outline：
css
* { outline: 1px dashed rgba(255,0,0,0.2); } /* 迅速看到布局边界 */- 在父元素上尝试临时设置
padding-top:1px或border-top:1px solid transparent：如果问题消失，则说明是 margin 塌陷。 - 临时设置
display: flow-root或overflow: auto：如果父包裹浮动子元素或 margin 问题解决，说明跟 BFC/浮动有关。 - 检查是否有 float / position / transform / display:flex 等会改变流的样式：这些会影响是否发生塌陷或是否被包含。
- 对比相邻元素的 margin 值：记住相邻合并是取较大者，不是相加。
- 查看是否有负 margin：负 margin 很容易导致元素重叠或看似"消失"。