HTML5学习_day07(1)--BFC概念
来源:互联网 发布:知乎 种子 小电影 编辑:程序博客网 时间:2024/06/04 08:55
1.BFC?
块级格式化上下文(block formatting context)简称BFC
它规定了块级盒子的渲染布局方式。
2.什么元素可以触发产生一个BFC?
1.根元素(HTML)
2.float浮动属性为非none,如设置为left或right时
3.position为 absolute(绝对定位)或fixed(固定定位)
4.display为inline-block,table-cell,table=caption,flex,inline-flex时
5.overflow不为visible,如设置值为hidden等
3.BFC布局特点
a.内部的block box会在垂直方向一个一个进行排列
b.BOX垂直方向的距离由margin决定,属于同一个BFC中的两个相邻的box的margin值会重叠.
c.每个元素的margin box左边,与包含块border box的左边相接触()
d.BFC的区域不会与float box重叠
f.BFC在页面是一个隔离的独立容器,容器里面子元素不会影响到外面的元素。
g.计算BFC的高度时,浮动元素也计算在内。(这个就是用overflow:hidden;来清除浮动 重新算高度的原理)
4.BFC可以用来做什么
a.清除浮动
b.阻止边距重叠
c.用于布局
5.兼容性
IE6~7是不支持BFC,它由一个私有的一个属性hasLayout,触发的条件跟BFC触发条件相似
1.元素框
css假设每个元素都会生成一个或者多个box,称之为元素框,元素框的中心区域有内容区,内容区外围包括了padding,border,margin,盒模型就是用来处理这些一个模型。(就是盒模型)
2.包含块()
每个元素都是相对于包含块摆放,这里包含块就是一个元素的“布局上下文”。(直接父级元素)
3.常见的盒模型分类:
1)一种是块级盒子(block box)
2)一种是行级盒子(line box)
block box
display:block|list-item|table都会使元素成为一个块级元素
line box
每一行可以称之为一条line box,它又是由这一行的许多inline-box组成 多个行内标签组成一个line box
格式化上下文(Formatting context)
每一个元素,或者是每一个box会根据设置的dispaly值去选择自己的渲染方式,不同的display有不同的层级,block-level(块级),inline-level(行级)
- HTML5学习_day07(1)--BFC概念
- HTML5学习_day07(2)--BFC定义
- 黑马程序员--Oracle学习_day07
- 学习BFC
- 理解CSS中的BFC概念
- BFC学习札记
- CSS BFC学习笔记
- CSS中的BFC学习
- 学习BFC心得
- 开始Html5学习:认识基础概念
- html5学习笔记3-枯燥的概念
- 如何理解css的BFC抽象概念
- CSS-BFC的概念及其作用
- CSS-BFC的概念及其作用
- 1、什么是BFC
- BFC
- BFC
- BFC
- CodeForces 149D Coloring Brackets 区间DP
- 转自 http://hukai.me/android-performance-battery/
- QT 数据类型的长度
- css3之animation制作闪烁文字效果
- MyEclipse提示过期,MyEclipse Trial Expired解决方法及激活
- HTML5学习_day07(1)--BFC概念
- mongodb 3.x 之实用新功能窥看[2] ——使用$lookup做多表关联处理
- Faster-RCNN+ZF用自己的数据集训练模型(Matlab版本)
- 开篇
- 关于class和id的优先级
- 用js导出Excel表格
- CSS-zoom
- 记录一些linux下python flask mysql使用过程中常用的命令
- MyBatis缓存分为一级缓存和二级缓存(二)