一、学习目标
-
彻底掌握CSS盒模型的两种模式，能灵活切换和应用；
-
理解BFC的定义、触发条件及核心应用，解决页面布局中的常见问题（margin塌陷、浮动溢出等）；
-
掌握盒模型相关属性的细节用法（padding、margin、border、box-sizing）。
二、核心知识点
- CSS盒模型深度解析
- 盒模型的组成：content（内容区）、padding（内边距）、border（边框）、margin（外边距），明确各区域的作用和计算方式。
- 两种盒模型模式（重点）：
- 标准盒模型（W3C盒模型）：box-sizing: content-box;（默认值），元素总宽度 = content宽度 + padding + border + margin；
- 怪异盒模型（IE盒模型）：box-sizing: border-box;，元素总宽度 = 设置的width（包含content + padding + border） + margin；
- 实操练习：用两种盒模型分别实现一个固定宽度的卡片，对比两者的差异；给页面所有元素设置box-sizing: border-box;（实际开发常用配置）。
- 盒模型相关属性细节：
- margin：上下margin塌陷（相邻元素、父元素与子元素）的原因及解决方案；margin: auto的生效条件；
- padding：不能为负值；内联元素的padding上下不影响行高，但会影响周围元素；
- border：border-radius实现圆角（单个角、椭圆角）；border-image实现自定义边框；border-collapse（表格边框合并）。
2. BFC（块级格式化上下文）原理及应用（核心）
- 定义：BFC是一个独立的渲染区域，内部元素的渲染不会影响到外部元素，外部元素也不会影响到内部元素。
- 触发BFC的条件（满足一个即可）：
- 根元素（html）；
- 浮动元素（float: left/right，不包括float: none）；
- 定位元素（position: absolute/fixed）；
- display: inline-block/table-cell/table-caption/flex/inline-flex；
- overflow: hidden/auto/scroll（不包括overflow: visible）。
- BFC的核心应用（解决实际布局问题）：
- 解决margin塌陷：给父元素触发BFC，避免子元素的margin-top传递给父元素；
- 清除浮动影响：给浮动元素的父容器触发BFC，实现父容器高度自适应（避免父容器塌陷）；
- 避免元素被浮动元素覆盖：给被覆盖的元素触发BFC，实现两栏自适应布局。
- 实操练习：分别用BFC解决margin塌陷、浮动塌陷、元素覆盖3个问题，对比解决前后的效果，理解BFC的作用机制。
三、 CSS 中'外边距塌陷'的定义、规则及场景
CSS中"外边距塌陷（也叫外边距重叠）" 简单来说，外边距塌陷是CSS中一种特殊的布局现象------两个或多个相邻块级元素的垂直外边距会合并成一个单一的外边距，最终间距取这些外边距中"最大的那个值"（负值有特殊规则）。
3.1 、外边距塌陷的核心特点
几个前提：
- 仅发生在垂直方向 （margin-top/margin-bottom），水平方向（margin-left/margin-right）永远不会塌陷；
- 仅针对普通流中的块级元素（行内元素、浮动元素、绝对/固定定位元素不会触发）；
- 塌陷后的外边距大小：
- 都是正数：取最大值；
- 一正一负：取两者的和（比如margin-top:20px + margin-bottom:-10px → 最终10px）；
- 都是负数：取绝对值最大的那个（比如-30px和-20px → 最终-30px）。
3.2 、外边距塌陷的3种常见场景
场景1：相邻的兄弟元素之间
这是最常见的情况，两个兄弟块级元素的下外边距和上外边距会合并。
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* 示例代码 */ .box1 { width: 100px; height: 100px; background: red; margin-bottom: 20px; /* 下外边距20px */ } .box2 { width: 100px; height: 100px; background: blue; margin-top: 30px; /* 上外边距30px */ } |
|----------------------------------------------------------------|
| HTML <div class="box1"></div> <div class="box2"></div> |
实际效果：两个盒子之间的间距不是20+30=50px，而是30px（取最大值）。
场景2：父元素与第一个/最后一个子元素之间
当父元素没有边框（border）、内边距（padding）、清除浮动（如overflow:hidden）等"阻隔"时，子元素的margin-top会"穿透"父元素，变成父元素的margin-top；同理，子元素的margin-bottom会变成父元素的margin-bottom。
|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS /* 示例代码 */ .parent { width: 200px; height: 200px; background: #eee; /* 父元素无border/padding/overflow，触发塌陷 */ } .child { width: 100px; height: 100px; background: orange; margin-top: 20px; /* 子元素上外边距20px */ } |
|--------------------------------------------------------------------|
| HTML <div class="parent"> <div class="child"></div> </div> |
实际效果：父子元素之间没有20px间距，而是父元素整体向上方元素偏移了20px（子元素的margin-top变成了父元素的margin-top）。
场景3：空的块级元素自身的外边距塌陷
一个没有内容（无宽高/文本）、无边框、无内边距的空块级元素，其margin-top和margin-bottom会合并成一个。
|--------------------------------------------------------------------------------------------------------|
| CSS /* 示例代码 */ .empty-box { margin-top: 10px; margin-bottom: 20px; /* 无宽高、无border/padding、无内容 */ } |
|----------------------------------------|
| HTML <div class="empty-box"></div> |
实际效果：这个空盒子的"有效外边距"不是10+20=30px，而是20px（取最大值），盒子本身高度为0。
3.3 、如何避免/解决外边距塌陷
针对最常见的"父子元素塌陷"，有几种简单有效的方法：
- 给父元素添加边框（border） ：哪怕是border: 1px solid transparent（透明边框）；
- 给父元素添加内边距（padding） ：比如padding-top: 1px；
- 给父元素设置overflow: hidden（触发BFC，块级格式化上下文）；
- 给父元素或子元素设置浮动（float: left/right）或定位（position: absolute/fixed）。
示例（解决父子塌陷）：
|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| CSS .parent { width: 200px; height: 200px; background: #eee; border: 1px solid transparent; /* 方法1：加透明边框 */ /* 或 padding-top: 1px; 方法2 */ /* 或 overflow: hidden; 方法3 */ } .child { width: 100px; height: 100px; background: orange; margin-top: 20px; } |
塌陷知识小 结
- 外边距塌陷仅发生在垂直方向的普通流块级元素，水平方向无此现象；
- 核心场景有3种：兄弟元素间、父子元素间、空块级元素自身；
- 解决父子塌陷的关键是给父元素加"阻隔"（border/padding）或触发BFC（如overflow:hidden）。
四、 CSS盒模型与BFC演示
|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| Plain Text <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>盒模型与BFC演示</title> <style> /* 标准盒模型 vs 怪异盒模型 */ .standard { box-sizing: content-box; width: 200px; border: 10px solid #333; padding: 20px; } .quirks { box-sizing: border-box; width: 200px; border: 10px solid #2196f3; padding: 20px; } /* BFC演示：解决margin塌陷 */ .bfc-container { overflow: hidden; /* 触发BFC */ background: #f5f5f5; } .child { margin: 20px; background: #ffeb3b; padding: 10px; } </style> </head> <body> <div class="standard">标准盒模型（总宽260px）</div> <div class="quirks">怪异盒模型（总宽200px）</div> <div class="bfc-container"> <div class="child">BFC解决margin塌陷1</div> <div class="child">BFC解决margin塌陷2</div> </div> </body> </html> |
图示：演示界面
五、当日作业（30-40分钟）
-
实现一个带圆角边框、内边距、阴影的卡片，分别用标准盒模型和怪异盒模型编写，对比两者的宽度计算差异；
-
编写一个两栏布局（左侧浮动，右侧自适应），用BFC解决右侧元素被左侧浮动元素覆盖的问题；
-
编写一个嵌套布局，出现margin塌陷问题，用BFC解决，并提交分析笔记（说明塌陷原因、触发BFC的方式、解决后的效果）。