《Web前端开发项目教程》网页的蓝图-简单布局-使用BFC隔离空间_第1页
《Web前端开发项目教程》网页的蓝图-简单布局-使用BFC隔离空间_第2页
《Web前端开发项目教程》网页的蓝图-简单布局-使用BFC隔离空间_第3页
《Web前端开发项目教程》网页的蓝图-简单布局-使用BFC隔离空间_第4页
《Web前端开发项目教程》网页的蓝图-简单布局-使用BFC隔离空间_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目02网页的蓝图—简单布局任务2-4使用BFC隔离空间任务2-4BFC布局

知识点理解垂直外边距合并的原理掌握BFC布局的触发方法掌握BFC布局解决外边距合并的方法技能点能够熟练应用BFC解决外边距合并的问题能够使用BFC解决其他实际问题一、垂直外边距的合并标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。块级元素的垂直margin合并一、垂直外边距的合并标准流中，上下相邻的两个元素或内外包含的两个元素，其垂直方向的上下外边距将会自动合并发生重叠。外边距合并可以使都具有外边距的元素在相邻时能尽量占用较小的空间。嵌套盒子的垂直margin合并二、BFC布局——规则BFC（BlockFormattingContext），块级格式化上下文。它是一个独立的渲染区域，决定了块级元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定的规则进行布局。一个环境中的元素不会影响到其他环境中的布局。（1）同一个BFC内的两个相邻块级元素的外边距合并，但不同

BFC外边距不合并；（2）BFC的区域不会与外部浮动元素重叠；（3）计算BFC高度的时候，浮动元素也会参与计算；（4）BFC元素是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素。二、BFC布局——触发BFCBFC就是让元素形成一个独立的空间，空间内的元素不会影响到外面，那么如何才能让元素形成这样一个空间呢？为元素设置CSS属性。常用的触发BFC方法：（1）设置包含块overflow属性值为hidden；（3）设置子元素

display属性值为:inline-block；BFC解决外边距合并问题<styletype="text/css">*{padding:0;margin:0;}.parent{ width:400px; background-color:#ff0; }.child1{ width:400px; height:100px; background-color:red;

margin-bottom:40px;

margin-top:30px;}.child2{ width:400px; height:100px; background-color:blue;

margin-top:20px;}</style><body><divclass="parent">

<divclass="child1"></div>

<divclass="child2"></div></div></body>？？父级盒子.parent和子盒子.child1的上边距发生了合并，而两个子盒子.child1的下边距和.child2的上边距也发生了合并解决方案1.使用overflow属性触发BFC。做一个独立的区块div包裹子元素child1，设置包裹元素div的overflow属性值hidden或者auto，包裹元素会被子元素撑开，高度就是子元素的高度；css部分代码如下：.box{overflow:hidden; }html部分代码如下：<body>

<divclass="parent">

<divclass="box">

<divclass="child1"></div>

</div>

<divclass="child2"></div>

</div></body>由于.child1盒子同时和父级盒子以及同级的盒子都发生了垂直外边距的合并，所以使用overflow属性将.child1盒子触发成独立的BFC，合并就不会再发生了。解决方案2.使用display属性值触发BFC。为子元素child1添加样式属性，如下：.child1{

width:400px;

height:100px;

background-color:red;

margin-bottom:40px;

margin-top:30px; display:inline-block;}BFC布局不仅仅可以解决垂直外边距合并的问题，还可以解决子元素浮动之后父元素塌陷的问题、浮动元素与其他元素重叠的问题。30px60px实训任务BFC经常用于页面布局，请根据以下布局要求完成如图2-4

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论