BFC(块级格式化上下文)
来源:互联网 发布:淘客cms系统哪个好 编辑:程序博客网 时间:2024/06/05 05:00
渲染规则
1.内部的box会在垂直方向,一个接一个的放置
2.box垂直方向的距离由margin决定,属于同一个bfc的两个相邻box的margin会发生重叠
3.每个元素的margin box的左边,与包含块border box的左边相接触(对于从做往右的格式化,否则相反)
4.bfc的区域不会与float box重叠
5.bfc就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也是如此
6.计算bfc的高度时,浮动的元素也参与计算
7.bfc的区域若没有设置固定的width、height,则会自动适应子元素的宽高
上下文
渲染的流程
文档解析成对象模型(dom),通过选择器给对应的元素加上样式,根据渲染规则渲染到显存区域
渲染过程中用到的数据通过上下文来获取
bfc
block formating context
渲染时用于保存临时数据和获取外部数据的容器
body是一个bfc(上下文,容器)
生成bfc
1.根元素
2.float属性不为none(脱离文档流)
3.position为absolute或fixed
4.display为inline-block,table-cell,table-caption,flex,inine-flex
5.overflow不为visible (hidden,auto,scroll)
bfc应用
1.自适应两栏布局
2.清除内部浮动
3.防止垂直margin重叠
链接:http://download.csdn.net/detail/flqbestboy/9920617
阅读全文
0 0
- CSS BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- BFC(块级格式化上下文)
- BFC-块级格式化上下文
- 清除浮动及 BFC(块级格式化上下文)
- BFC块级格式化上下文简述
- CSS--BFC(块级格式化上下文)
- 深入BFC块级格式化上下文
- BFC(块格式化上下文)知识点整理
- 块级上下文(BFC)
- (转)理解块级格式化上下文——BFC
- BFC环境(block formatting context块级格式化上下文)
- BFC(Block formatting context)直译为"块级格式化上下文"
- 块格式化上下文(BFC)布局规则及常见情景
- BFC块级格式上下文
- CSS格式化上下文(BFC)
- BFC块级格式化范围
- pat 1011. A+B和C (15)
- Atitit 提升用户体验 生物识别 与登录 身份验证
- Atitit 学习的方法 attilax总结
- 复习笔记系列(一)—— 数组(ES5中的数组)
- 数组逆序重放
- BFC(块级格式化上下文)
- hdu 6082 度度熊与邪恶大魔王 背包
- 浅析散列设计
- 三:远程仓库 + 克隆
- 线程
- 与指定数字相同的数的个数(noi 1.6-01)
- java核心卷Ⅰ
- Oracle 数据库Listener动态注册和静态注册
- 我们的敏捷之路——回顾会议