教学课件任务02-4：网页的蓝图--简单布局--使用BFC隔离空间.pptxVIP

教材配套资源页完整PPT课件 教学课件任务02-4：网页的蓝图--简单布局--使用BFC隔离空间 1 项目02 网页的蓝图—简单布局 任务2-4 使用BFC隔离空间 2 任务2-4 BFC布局 知识点 理解垂直外边距合并的原理 掌握BFC布局的触发方法 掌握BFC布局解决外边距合并的方法 技能点 能够熟练应用BFC解决外边距合并的问题 能够使用BFC解决其他实际问题 3 一、垂直外边距的合并 标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。 块级元素的垂直margin合并 4 一、垂直外边距的合并 标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。 嵌套盒子的垂直margin合并 5 二、BFC布局——规则 BFC（Block Formatting Context），块级格式化上下文。它是一个独立的渲染区域，决定了块级元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。 （1）同一个BFC内的两个相邻块级元素的外边距合并，