【前端开发之CSS】（五）CSS 盒模型深度解析：从基础到实战，掌控页面布局核心

前言

在 CSS 的世界里，每一个 HTML 元素都可以被看作是一个 "盒子"------ 这就是盒模型（Box Model）。它是 CSS 布局的基石，决定了元素在页面中的大小、位置以及与其他元素的间距。无论是简单的文字排版，还是复杂的响应式布局，理解盒模型都是前端开发者绕不开的核心技能。这篇文章将从盒模型的基本概念出发，深入拆解边框、内边距、外边距的用法，解决浏览器默认样式的坑，结合大量实战案例，带你彻底掌握盒模型的精髓！下面就让我们正式开始吧！

一、盒模型是什么？一张图看懂核心结构

想象一下现实中的快递盒：外面的纸箱是 "边框"，纸箱内部与物品之间的缓冲泡沫是 "内边距"，物品本身是 "内容区"，而两个快递盒之间的空隙就是 "外边距"。CSS 盒模型与这个逻辑完全一致，每个元素都由四个部分组成，从内到外依次是：

内容区（Content） ：元素的核心区域，用于显示文本、图片等内容，宽度和高度通过**width和height**属性设置。

内边距（Padding）：内容区与边框之间的距离，相当于 "缓冲地带"，会扩大元素的整体尺寸。

边框（Border）：包裹在内边距外面的线条，可设置粗细、颜色、样式，同样会影响元素的整体大小。

外边距（Margin）：边框外面的空白区域，用于控制元素与其他元素之间的间距，不会影响元素自身的尺寸。

盒模型可视化示意图

关键公式：元素的实际尺寸计算

默认情况下（box-sizing: content-box），元素的实际宽度和高度需要考虑内边距和边框，公式如下：

实际宽度 = width + padding-left + padding-right + border-left-width + border-right-width

实际高度 = height + padding-top + padding-bottom + border-top-width + border-bottom-width

这是盒模型最核心的知识点，也是很多新手容易踩坑的地方。比如设置一个width: 200px的元素，若添加了10px的内边距和2px的边框，它的实际宽度会变成200 + 10×2 + 2×2 = 224px，而非设置的200px。后面会详细讲解如何通过box-sizing属性改变这种默认行为。

二、边框（Border）：给盒子加层 "保护壳"

边框是盒模型的 "外壳"，不仅能美化元素，还能起到分隔内容的作用。CSS 提供了丰富的边框属性，支持设置粗细、颜色、样式，还能单独控制四个方向的边框。

2.1 边框的三大基础属性

边框的样式由三个核心属性控制，缺一不可（尤其是border-style，默认值为none，不设置则边框不显示）：

border-width：边框粗细，可选值为具体数值（px、em 等）或关键字（thin、medium、thick），默认值为medium（约 2px）。

border-color：边框颜色，支持预定义颜色（red、blue）、十六进制（#ff0000）、RGB（rgb (255,0,0)）等，默认值为当前元素的文本颜色。

border-style：边框样式，这是边框显示的关键，常用值如下：

solid：实线（最常用）

dashed：虚线

dotted：点线

double：双线

none：无边框（默认）

hidden：隐藏边框（与none类似，但在表格边框合并时效果不同）

基础用法示例

css 复制代码

.border-basic {
  width: 200px;
  height: 150px;
  border-width: 3px;      /* 边框粗细3px */
  border-color: #007bff;  /* 边框颜色蓝色 */
  border-style: solid;    /* 实线边框 */
}

HTML 结构：

html 复制代码

<div class="border-basic">基础边框示例</div>

效果：一个 200×150px 的盒子，周围环绕 3px 宽的蓝色实线边框。

2.2 边框的简写属性

为了简化代码，CSS 支持将三个基础属性合并为**border**简写属性，顺序无严格要求（但建议遵循 "宽度→样式→颜色" 的习惯）：

css 复制代码

.border-shorthand {
  width: 200px;
  height: 150px;
  border: 3px solid #007bff; /* 简写：粗细 样式 颜色 */
}

简写属性与分开写法效果完全一致，是实际开发中最常用的方式。

2.3 单独控制四个方向的边框

如果需要给元素的四个方向设置不同的边框（比如只给顶部加边框，其他方向不加），可以使用方向限定属性：

顶部：border-top、border-top-width、border-top-color、border-top-style

底部：border-bottom 系列

左侧：border-left 系列

右侧：border-right 系列

示例 1：只给顶部加边框

css 复制代码

.border-top-only {
  width: 200px;
  height: 150px;
  border-top: 3px solid #dc3545; /* 仅顶部边框 */
}

示例 2：四个方向边框各不相同

css 复制代码

.border-direction {
  width: 200px;
  height: 150px;
  border-top: 2px solid red;    /* 上：红色实线 */
  border-right: 3px dashed blue;/* 右：蓝色虚线 */
  border-bottom: 4px dotted green;/* 下：绿色点线 */
  border-left: 5px double orange;/* 左：橙色双线 */
}

2.4 边框的特殊用法：圆角边框

虽然**border-radius**严格来说是独立属性，但它常与边框配合使用，让方形边框变成圆角（详细用法在之前的博客中已讲解，这里简单回顾）：

css 复制代码

.border-radius {
  width: 200px;
  height: 150px;
  border: 3px solid #28a745;
  border-radius: 10px; /* 10px圆角 */
}

2.5 边框的 "坑"：会撑大盒子

如前所述，默认情况下边框会增加元素的实际尺寸。例如：

css 复制代码

.border-expand {
  width: 200px;
  height: 150px;
  border: 10px solid #6c757d; /* 10px宽边框 */
}

此时元素的实际宽度 = 200px + 10px×2 = 220px，实际高度 = 150px + 10px×2 = 170px，比设置的width和height大了 20px。

解决方法：box-sizing: border-box

为了让边框不再撑大盒子，可以给元素设置**box-sizing: border-box，此时width和height会包含内容区、内边距和边框，元素的实际尺寸就是设置的width和height**：

css 复制代码

.border-box {
  width: 200px;
  height: 150px;
  border: 10px solid #6c757d;
  box-sizing: border-box; /* 边框不撑大盒子 */
}

此时元素的实际宽度和高度仍然是 200×150px，边框会 "挤占" 内容区的空间，内容区的实际宽度变为 200px - 10px×2 = 180px。

最佳实践 ：在实际开发中，建议给所有元素统一设置**box-sizing: border-box**，避免边框和内边距导致的尺寸计算混乱：

css 复制代码

* {
  box-sizing: border-box; /* 全局设置，所有元素生效 */
  margin: 0;
  padding: 0;
}

2.6 实战案例：利用边框实现三角形

边框不仅能做常规的 "框"，还能通过巧妙的设置实现三角形、箭头等特殊形状。原理是：当元素宽高为 0 时，边框会呈现出梯形，将其中三个边框设置为透明，剩下的一个边框就会变成三角形。

示例：向上的三角形

css 复制代码

.triangle-up {
  width: 0;
  height: 0;
  /* 左右边框透明，底部边框为蓝色 */
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 30px solid #007bff;
}

HTML 结构：

html 复制代码

<div class="triangle-up"></div>

效果：一个向上的蓝色三角形。同理，修改透明边框的方向可以实现向下、向左、向右的三角形。

三、内边距（Padding）：给内容留 "呼吸空间"

内边距是内容区与边框之间的距离，用于控制内容与边框的间距，让页面布局更宽松、易读。与边框类似，内边距也支持单独控制四个方向，并有简写属性。

3.1 内边距的基础属性

内边距的属性分为单个方向和简写两种，单个方向属性如下：

padding-top：上内边距

padding-bottom：下内边距

padding-left：左内边距

padding-right：右内边距

属性值支持具体数值（px、em）、百分比（相对于父元素的宽度），不支持负数。

基础用法示例

css 复制代码

.padding-basic {
  width: 200px;
  height: 150px;
  border: 1px solid #ddd;
  padding-top: 20px;    /* 上内边距20px */
  padding-left: 15px;   /* 左内边距15px */
  padding-right: 15px;  /* 右内边距15px */
  padding-bottom: 20px; /* 下内边距20px */
}

HTML 结构：

html 复制代码

<div class="padding-basic">内边距示例：内容与边框之间有明显间距</div>

效果：盒子内部的文字与边框之间上下各有 20px、左右各有 15px 的间距，内容不再紧贴边框。

3.2 内边距的简写属性

内边距的简写属性**padding**支持 1-4 个值，遵循 "顺时针" 规则，灵活度极高，是实际开发中的首选方式：

1 个值：padding: 10px → 四个方向内边距均为 10px

2 个值：padding: 10px 20px → 上下内边距 10px，左右内边距 20px

3 个值：padding: 10px 20px 30px → 上内边距 10px，左右内边距 20px，下内边距 30px

4 个值：padding: 10px 20px 30px 40px → 上 10px、右 20px、下 30px、左 40px（顺时针顺序）

简写示例对比

分开写法：

css 复制代码

.padding-separate {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 30px;
  padding-left: 40px;
}

简写写法（效果一致）：

css 复制代码

.padding-shorthand {
  padding: 10px 20px 30px 40px;
}

3.3 内边距的 "坑"：同样会撑大盒子

和边框一样，默认情况下（box-sizing: content-box），内边距也会增加元素的实际尺寸。例如：

css 复制代码

.padding-expand {
  width: 200px;
  height: 150px;
  border: 1px solid #ddd;
  padding: 20px; /* 四个方向内边距20px */
}

元素的实际宽度 = 200px + 20px×2 = 240px，实际高度 = 150px + 20px×2 = 190px，内边距让盒子 "变大" 了。

解决方法：同样使用 box-sizing: border-box

css 复制代码

.padding-box {
  width: 200px;
  height: 150px;
  border: 1px solid #ddd;
  padding: 20px;
  box-sizing: border-box; /* 内边距不撑大盒子 */
}

此时元素的实际宽度和高度仍然是 200×150px，内边距会 "挤压" 内容区的空间，内容区的实际宽度变为 200px - 20px×2 - 1px×2 = 158px（减去边框宽度）。

3.4 内边距的特殊用法：百分比值

当内边距使用百分比作为单位时，百分比是相对于父元素的宽度计算的，无论上下内边距还是左右内边距。这是一个非常重要的特性，常用于实现响应式布局。

示例：自适应宽高比的盒子

利用内边距百分比可以实现固定宽高比的盒子（比如 16:9），这在视频播放器、广告横幅等场景中非常常用：

css 复制代码

.aspect-ratio-box {
  width: 100%; /* 宽度占父元素100% */
  padding-bottom: 56.25%; /* 16:9 = 9/16 = 56.25% */
  height: 0; /* 高度设为0，由内边距撑起 */
  background-color: #f5f5f5;
  position: relative;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 子元素内容居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

HTML 结构：

html 复制代码

<div class="aspect-ratio-box">
  <div class="aspect-ratio-content">16:9 自适应盒子</div>
</div>

效果：盒子的宽度会随父元素变化，但宽高比始终保持 16:9，不会变形。

3.5 实战案例：卡片组件的内边距设计

内边距是卡片组件设计的关键，合理的内边距能让卡片内容层次分明、视觉舒适：

css 复制代码

.card {
  width: 300px;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 24px; /* 卡片内部统一内边距 */
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}

.card-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

HTML 结构：

html 复制代码

<div class="card">
  <h3 class="card-title">卡片标题</h3>
  <p class="card-desc">这是一张使用内边距优化的卡片，内容与边框之间的间距合理，阅读体验更佳。</p>
</div>

效果：卡片内部上下左右均有 24px 内边距，标题和描述文字不会紧贴边框，视觉效果清爽。

四、外边距（Margin）：控制盒子之间的 "距离"

外边距是元素边框与其他元素之间的空白区域，用于控制元素在页面中的位置和元素之间的间距，不影响元素自身的尺寸。

4.1 外边距的基础属性

与内边距类似，外边距的属性也分为单个方向和简写两种，单个方向属性如下：

margin-top：上外边距

margin-bottom：下外边距

margin-left：左外边距

margin-right：右外边距

属性值支持具体数值（px、em）、百分比（相对于父元素的宽度），还支持负数（让元素重叠或超出父元素）。

基础用法示例

css 复制代码

.margin-basic {
  width: 200px;
  height: 150px;
  background-color: #007bff;
  color: #fff;
  margin-top: 20px;    /* 上外边距20px */
  margin-left: 30px;   /* 左外边距30px */
  margin-right: 30px;  /* 右外边距30px */
  margin-bottom: 20px; /* 下外边距20px */
}

HTML 结构：

html 复制代码

<div class="margin-basic">外边距示例：与其他元素保持间距</div>
<div class="margin-basic">第二个盒子：与第一个盒子之间有20px间距</div>

效果：两个蓝色盒子之间上下各有 20px 间距，左右各有 30px 间距，不会紧贴在一起。

4.2 外边距的简写属性

外边距的简写属性**margin**与内边距完全一致，支持 1-4 个值，遵循 "顺时针" 规则：

1 个值：margin: 10px → 四个方向外边距均为 10px

2 个值：margin: 10px 20px → 上下 10px，左右 20px

3 个值：margin: 10px 20px 30px → 上 10px，左右 20px，下 30px

4 个值：margin: 10px 20px 30px 40px → 上 10px、右 20px、下 30px、左 40px

简写示例

css 复制代码

.margin-shorthand {
  width: 200px;
  height: 150px;
  background-color: #dc3545;
  color: #fff;
  margin: 20px 30px; /* 上下20px，左右30px */
}

4.3 外边距的核心用法：元素居中

外边距最常用的场景之一是实现块级元素的水平居中，只需满足两个条件：

元素是块级元素 （display: block）；

给元素设置固定宽度 （width）；

将左右外边距设为 auto。

示例：块级元素水平居中

css 复制代码

.margin-center {
  width: 300px; /* 必须设置宽度 */
  height: 150px;
  background-color: #28a745;
  color: #fff;
  margin: 0 auto; /* 上下外边距0，左右auto（水平居中） */
}

HTML 结构：

html 复制代码

<div class="margin-center">水平居中的盒子</div>

效果：盒子在页面中水平居中，无论页面宽度如何变化，盒子始终位于水平中间位置。

补充说明

margin: auto 只对水平方向有效，垂直方向无法通过**margin: auto**实现居中（需使用弹性布局、定位等方式）。

行内元素和行内块元素无法通过**margin: 0 auto居中，需给其父元素设置text-align: center**。

4.4 外边距的 "坑"：外边距合并（Margin Collapse）

这是盒模型中最容易让人困惑的问题 ------ 当两个垂直方向的外边距相遇时，它们会合并成一个外边距，合并后的外边距大小等于两个外边距中较大的那个，这就是 "外边距合并"（也叫 "外边距塌陷"）。

场景 1：相邻元素的垂直外边距合并

css 复制代码

.margin-collapse1 {
  width: 200px;
  height: 100px;
  background-color: #007bff;
  margin-bottom: 30px; /* 下外边距30px */
}

.margin-collapse2 {
  width: 200px;
  height: 100px;
  background-color: #dc3545;
  margin-top: 20px; /* 上外边距20px */
}

HTML 结构：

html 复制代码

<div class="margin-collapse1"></div>
<div class="margin-collapse2"></div>

预期效果：两个盒子之间的间距为 30px + 20px = 50px

实际效果：间距为 30px（较大的那个外边距），两个外边距合并了。

场景 2：父子元素的垂直外边距合并

当父元素没有边框、内边距或触发 BFC（块级格式化上下文）时，子元素的上外边距会 "传递" 给父元素，导致父元素也产生上外边距：

css 复制代码

.parent {
  width: 300px;
  height: 200px;
  background-color: #f5f5f5;
  /* 父元素无边框、内边距 */
}

.child {
  width: 100px;
  height: 100px;
  background-color: #007bff;
  margin-top: 30px; /* 子元素上外边距30px */
}

HTML 结构：

html 复制代码

<div class="parent">
  <div class="child"></div>
</div>

预期效果：子元素相对于父元素顶部有 30px 间距

实际效果：父元素相对于页面顶部有 30px 间距，子元素紧贴父元素顶部，外边距合并了。

如何解决外边距合并？

给父元素添加边框或内边距 ：阻断子元素外边距的传递

css 复制代码

.parent {
  border-top: 1px solid transparent; /* 透明边框，不影响视觉 */
  /* 或 padding-top: 1px; */
}

触发父元素的 BFC ：BFC 元素会隔离内部元素，避免外边距合并，常用方式：
- overflow: hidden（最常用，无副作用）
- display: flex
- position: absolute
- float: left/right
css 复制代码
```
.parent {
  overflow: hidden; /* 触发BFC，解决外边距合并 */
}
```

避免相邻元素同时设置垂直外边距 ：只给其中一个元素设置外边距

css 复制代码

.margin-collapse1 {
  margin-bottom: 30px;
}
.margin-collapse2 {
  margin-top: 0; /* 取消上外边距 */
}

4.5 外边距的特殊用法：负值外边距

外边距支持负值，通过设置负的外边距可以让元素重叠、超出父元素，或实现一些特殊的布局效果。

示例 1：元素重叠

css 复制代码

.margin-negative1 {
  width: 200px;
  height: 200px;
  background-color: #007bff;
  position: relative;
  z-index: 1;
}

.margin-negative2 {
  width: 200px;
  height: 200px;
  background-color: #dc3545;
  margin-top: -50px; /* 上外边距-50px，向上重叠 */
  margin-left: -50px; /* 左外边距-50px，向左重叠 */
  position: relative;
  z-index: 2;
}

HTML 结构：

html 复制代码

<div class="margin-negative1"></div>
<div class="margin-negative2"></div>

效果：红色盒子向上、向左各重叠蓝色盒子 50px，形成叠加效果。

示例 2：实现两栏布局（经典用法）

利用负值外边距可以实现自适应两栏布局，左侧固定宽度，右侧自适应：

css 复制代码

.container {
  width: 100%;
  overflow: hidden; /* 触发BFC，包裹子元素 */
}

.sidebar {
  width: 200px;
  height: 300px;
  background-color: #f5f5f5;
  float: left; /* 左侧浮动 */
}

.main {
  height: 300px;
  background-color: #e9ecef;
  margin-left: 200px; /* 左外边距等于左侧宽度，避免重叠 */
  /* 若要让右侧与左侧有间距，可设置 margin-left: 220px; */
}

HTML 结构：

html 复制代码

<div class="container">
  <div class="sidebar">左侧固定栏（200px）</div>
  <div class="main">右侧自适应栏</div>
</div>

效果：左侧固定 200px 宽，右侧自适应剩余宽度，且与左侧无重叠。

4.6 实战案例：页面布局的外边距控制

在实际页面开发中，外边距用于控制各个模块之间的间距，让布局层次分明：

css 复制代码

.header {
  height: 80px;
  background-color: #343a40;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px; /* 与下方内容间距30px */
}

.content {
  width: 1200px;
  margin: 0 auto; /* 水平居中 */
  display: flex;
  gap: 20px; /* 替代margin，控制子元素间距（flex布局专用） */
}

.sidebar {
  width: 300px;
  height: 500px;
  background-color: #f8f9fa;
}

.main-content {
  flex: 1; /* 自适应剩余宽度 */
  height: 500px;
  background-color: #f8f9fa;
}

.footer {
  height: 100px;
  background-color: #343a40;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px; /* 与上方内容间距30px */
}

HTML 结构：

html 复制代码

<header class="header">页头</header>
<div class="content">
  <aside class="sidebar">侧边栏</aside>
  <main class="main-content">主内容区</main>
</div>
<footer class="footer">页脚</footer>

效果：页头与内容区间距 30px，内容区水平居中，侧边栏与主内容区间距 20px，主内容区与页脚间距 30px，整体布局整洁有序。

五、去除浏览器默认样式：统一跨浏览器表现

不同浏览器会给 HTML 元素设置默认的内外边距和样式（比如body默认有margin: 8px，ul默认有padding-left: 40px），这会导致同一套代码在不同浏览器中显示效果不一致，给开发带来麻烦。

5.1 浏览器默认样式的问题

例如，未重置样式时，ul列表会自带缩进和圆点 ，h1-h6标题会自带上下外边距 ，body会自带 8px 外边距：

html 复制代码

<!-- 未重置样式的效果 -->
<body>
  <h1>标题</h1>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
  </ul>
</body>

在 Chrome 浏览器中，body会有 8px 外边距，h1会有上下外边距，ul会有左侧内边距，导致页面四周有空白，列表项缩进。

5.2 解决方法：重置默认样式

为了统一跨浏览器的表现，我们需要手动去除这些默认样式，最常用的方式是使用通配符选择器 给所有元素设置**margin: 0和padding: 0**：

css 复制代码

/* 重置浏览器默认内外边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 同时设置盒模型，一举两得 */
}

5.3 进阶：Normalize.css（更优雅的重置方案）

虽然通配符重置简单粗暴，但会清除所有元素的默认样式，包括一些有用的样式（比如button的默认点击效果）。更优雅的方案是使用**Normalize.css**，它不会完全清除默认样式，而是修复浏览器之间的不一致，保留有用的默认样式，让页面在不同浏览器中表现统一。

使用方法

下载Normalize.css文件（官网：https://necolas.github.io/normalize.css/）

在 HTML 中引入：

html 复制代码

<link rel="stylesheet" href="normalize.css">

之后再编写自定义 CSS，无需手动重置内外边距。

5.4 实战：重置样式后的页面

css 复制代码

/* 基础重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 自定义样式 */
body {
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f5f5f5;
}

h1 {
  font-size: 24px;
  color: #333;
  margin: 20px 0; /* 手动添加需要的外边距 */
  text-align: center;
}

ul {
  list-style: none; /* 去除列表默认圆点 */
  width: 300px;
  margin: 0 auto;
}

li {
  padding: 10px;
  background-color: #fff;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

HTML 结构：

html 复制代码

<body>
  <h1>重置样式后的列表</h1>
  <ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
  </ul>
</body>

效果：body无默认外边距，ul无默认内边距和圆点，列表项整洁排列，在所有浏览器中表现一致。

总结

盒模型是 CSS 布局的基础，掌握好边框、内边距、外边距的用法，以及如何解决常见问题，就能应对大部分页面布局需求。希望这篇文章能帮助你彻底理解盒模型，在实际开发中灵活运用，打造出更美观、更高效的网页布局！

如果有任何问题或疑问，欢迎在评论区留言交流～

【前端开发之CSS】（五）CSS 盒模型深度解析：从基础到实战，掌控页面布局核心

目录

前言

一、盒模型是什么？一张图看懂核心结构

盒模型可视化示意图

关键公式：元素的实际尺寸计算

二、边框（Border）：给盒子加层 "保护壳"

2.1 边框的三大基础属性

基础用法示例

2.2 边框的简写属性

2.3 单独控制四个方向的边框

示例 1：只给顶部加边框

示例 2：四个方向边框各不相同

2.4 边框的特殊用法：圆角边框

2.5 边框的 "坑"：会撑大盒子

解决方法：box-sizing: border-box

2.6 实战案例：利用边框实现三角形

示例：向上的三角形

三、内边距（Padding）：给内容留 "呼吸空间"

3.1 内边距的基础属性

基础用法示例

3.2 内边距的简写属性

简写示例对比

3.3 内边距的 "坑"：同样会撑大盒子

解决方法：同样使用 box-sizing: border-box

3.4 内边距的特殊用法：百分比值

示例：自适应宽高比的盒子

3.5 实战案例：卡片组件的内边距设计

四、外边距（Margin）：控制盒子之间的 "距离"

4.1 外边距的基础属性

基础用法示例

4.2 外边距的简写属性

简写示例

4.3 外边距的核心用法：元素居中

示例：块级元素水平居中

补充说明

4.4 外边距的 "坑"：外边距合并（Margin Collapse）

场景 1：相邻元素的垂直外边距合并

场景 2：父子元素的垂直外边距合并

如何解决外边距合并？

4.5 外边距的特殊用法：负值外边距

示例 1：元素重叠

示例 2：实现两栏布局（经典用法）

4.6 实战案例：页面布局的外边距控制

五、去除浏览器默认样式：统一跨浏览器表现

5.1 浏览器默认样式的问题

5.2 解决方法：重置默认样式

5.3 进阶：Normalize.css（更优雅的重置方案）

使用方法

5.4 实战：重置样式后的页面

总结