HTML5学习_day07(1)--BFC概念

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(行级)