盒模型
盒模型分為IE盒模型和W3C標(biāo)準(zhǔn)盒模型咬摇。
IE盒模型
IE盒模型也稱border-box伐蒂。
屬性width，height包含content肛鹏，border和padding逸邦。
width = 內(nèi)容的寬度
height = 內(nèi)容的高度
W3C標(biāo)準(zhǔn)盒模型
W3C標(biāo)準(zhǔn)盒模型也稱content-box。
屬性width在扰，height只包含content缕减，不包含border和padding
width = border + padding + 內(nèi)容的寬度
height = border + padding + 內(nèi)容的高度
在ie8+瀏覽器中使用哪個盒模型可以由box-sizing(CSS新增的屬性)控制，默認(rèn)值為content-box芒珠，即標(biāo)準(zhǔn)盒模型桥狡；如果將box-sizing設(shè)為border-box則用的是IE盒模型。若不聲明DOCTYPE類型皱卓，IE瀏覽器會將盒子模型解釋為IE盒子模型裹芝，F(xiàn)ireFox等會將其解釋為W3C盒子模型；娜汁。在當(dāng)前W3C標(biāo)準(zhǔn)中盒模型是可以通過box-sizing自由的進(jìn)行切換的嫂易。
1，BFC是什么存炮？
Block fomatting context = block-level box + Formatting Context
Box:
1.1block-level box即塊級元素
display屬性為block, list-item, table的元素炬搭，會生成block-level box；并且參與 block fomatting context穆桂；
1.2inline-level box即行內(nèi)元素
display 屬性為 inline, inline-block, inline-table的元素宫盔，會生成inline-level box。并且參與 inline formatting context享完；
Formatting context
Formatting context是W3C CSS2.1規(guī)范中的一個概念灼芭。它是頁面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則般又，它決定了其子元素將如何定位彼绷，以及和其他元素的關(guān)系巍佑、相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context(簡稱IFC)寄悯。
BFC 定義
BFC(Block formatting context)直譯為"塊級格式化上下文"萤衰。它是一個獨立的渲染區(qū)域，只有Block-level box參與猜旬， 它規(guī)定了內(nèi)部的Block-level Box如何布局脆栋，并且與這個區(qū)域外部毫不相干。
2洒擦，BFC的生成
滿足下列CSS聲明之一的元素便會生成BFC椿争。
- 根元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell熟嫩、table-caption
display：table也認(rèn)為可以生成BFC秦踪，其實這里的主要原因在于Table會默認(rèn)生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC - position的值為absolute或fixed
3掸茅，BFC的約束規(guī)則
- 內(nèi)部的Box會在垂直方向上一個接一個的放置
- 垂直方向上的距離由margin決定椅邓。（完整的說法是：屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊（塌陷），與方向無關(guān)倦蚪。）
- 每個元素的左外邊距與包含塊的左邊界相接觸（從左向右）希坚，即使浮動元素也是如此边苹。（這說明BFC中子元素不會超出他的包含塊陵且，而position為absolute的元素可以超出他的包含塊邊界）
- BFC的區(qū)域不會與float的元素區(qū)域重疊
- 計算BFC的高度時，浮動子元素也參與計算
- BFC就是頁面上的一個隔離的獨立容器个束，容器里面的子元素不會影響到外面元素慕购，反之亦然
4，BFC在布局中的應(yīng)用
4.1防止margin重疊（塌陷）
- 兩個相鄰Box垂直方向margin重疊
- 相鄰Box水平方向margin重疊
- 嵌套元素的margin重疊
4.2清除內(nèi)部浮動
4.3 自適應(yīng)多欄布局的
- 自適應(yīng)兩欄布局
- 自適應(yīng)三欄布局
