- 1、本文档被系统程序自动判定探测到侵权嫌疑,本站暂时做下架处理。
- 2、如果您确认为侵权,可联系本站左侧在线QQ客服请求删除。我们会保证在24小时内做出处理,应急电话:400-050-0827。
- 3、此文档由网友上传,因疑似侵权的原因,本站不提供该文档下载,只提供部分内容试读。如果您是出版社/作者,看到后可认领文档,您也可以联系本站进行批量认领。
查看更多
目 录
关于BFC
JSON.srtingigy
在项目中遇到的瀑布流问题
本文档使用 看云 构建 - 2 -
关于BFC
关于BFC
BFC定义
BFC (Block Formatting Context ),即块格式化上下文 ,它是CSS2.1规范定义的 ,关于CSS渲染定位的一个概
念。
BCF的范围
在MDN中的描述是 :一个BFC包含创建该上下文元素的所有子元素 ,但不包括创建了新BFC的子元素的内部元
素。
BFC的效果
1. 内部的盒会在垂直方向一个接一个排列 ;
2. 处于同一个BFC中的元素相互影响 ,可能会发生margin collapse ;
3. 每个元素的margin box的左边 ,与容器块border box的左边相接触(对于从左往右的格式化 ,否则相反)。即
使存在浮动也是如此 ;
4. BFC就是页面上的一个隔离的独立容器 ,容器里面的子元素不会影响到外面的元素 ,反之亦然 ;
5. 计算BFC的高度时 ,考虑BFC所包含的所有元素 ,连浮动元素也参与计算 ;
6. 浮动盒区域不叠加到BFC上 ;
创建一个BFC
在盒子上添加如下样式 :
1. float 除了none以外的值
2. overflow (hidden ,auto ,scroll )
3. display (table-cell ,table-caption ,inline-block, flex, inline-flex)
4. position值为 (absolute ,fixed )
5. fieldset元素
常见的是overflow hidden、float left/right、positionabsolute。也就是说 ,每次看到这些属性的时候 ,就代
表了该元素以及创建了一个BFC了。
理解BFC
从上述效果看 ,感觉创建一个BFC ,就像是新建了一个html文档 ,不过这个html文档的作用范围在创建该BFC的
盒子内
如果把一个html文档看成是一个盒子
本文档使用 看云 构建 - 3 -
关于BFC
!DOCTYPE html
html lang en
head
meta charset UTF-8
titleDocument/title
/head
body
/body
/html
那么 ,以上初始代码的... ,就像用div创建的一个盒子 ,当然这个盒子就有BFC效果。
我们在其中添加2个绿色的方块 ,来对比以上列举的BFC效果。
!DOCTYPE html
html lang en
head
meta charset UTF-8
titleDocument/title
style
* {margin: 0;padding: 0;}
.box {width: 50px;height: 50px;background-color: mediumseagreen;margin:
10px;}
/style
/head
body
div class box/div
div class box/div
/body
/html
在浏览器中打开如上图。内部的盒子 (即两个div元素 ,图中表现的两个绿色方块 )在垂直方向一个接一个排列 ,
本文档使用 看云 构建 - 4 -
关于BFC
符合BFC效果中描述的第1点。
然后我们打开浏览器调试看看。
先看上图中的第一张图 ,我将方块的边距margin设为10px ,边距+绿色方块构成一个margin box ,其左边与浏
览器页面左边接触 ,符合BFC效果中描述的第3点 : 每个元素的margin box (我们例子中的边距+绿色方块 )的
左边 ,与容器块border box (浏览器页
您可能关注的文档
- Fclassroom技术实施工作.pdf
- ffmpeg 翻译文档(ffmpeg中文文档) .pdf
- fouber的前端工程专题.pdf
- git常用指令排行榜.pdf
- Go 标准库 中文参考.pdf
- Go语言标准库示例.pdf
- Growth 全栈增长工程师指南.pdf
- Highcharts图表开发全解.pdf
- Homestead开发环境在Win7上的安装.pdf
- HT 温湿度检测仪.pdf
- 四川省德阳市罗江中学2025届高三考前热身化学试卷含解析.doc
- 山东省枣庄现代实验学校2025届高三下学期第五次调研考试化学试题含解析.doc
- 吉林省长春市十一高中等九校教育联盟2025届高三一诊考试生物试卷含解析.doc
- 2025届江苏省盐城市伍佑中学高考仿真模拟化学试卷含解析.doc
- 2025届广西贺州中学高考冲刺押题(最后一卷)生物试卷含解析.doc
- 安徽省池州市贵池区2025届高三第一次模拟考试生物试卷含解析.doc
- 宁夏银川一中2025届高三(最后冲刺)化学试卷含解析.doc
- 广东省广州市增城区四校联考2025届高考压轴卷化学试卷含解析.doc
- 2025届邯郸市第一中学高考生物必刷试卷含解析.doc
- 2025届安徽省安庆市石化第一中学高考仿真卷化学试卷含解析.doc
最近下载
知传链电子书
- 第一篇基础篇.pdf
- Unit Thirteen Farewell 送行告别.pdf
- Unit Twelve Traditional Chinese Festivals中国传统节日.pdf
- Unit Eleven Settling Complaints 解决投诉.pdf
- Unit Ten Shopping 旅游购物.pdf
- Unit Nine Scenic Spots Introduction 景点介绍.pdf
- Unit Eight Local Tour Guide Service 地陪服务.pdf
- Unit Seven Visiting Places of Interest 参观游览.pdf
- Unit Six Recreation and Entertainment 消遣娱乐.pdf
- Unit Five Conference and Exhibition Service 会展服务.pdf
文档评论(0)