CSS盒模型：
border padding margin  content

标准模型和IE模型的区别(如图般的明显区别):

CSS如何设置这两种模型：
box-sizing:content-box;(标准模型，浏览器的默认方式)
box-sizing:border-box;(IE模型)

JS如何设置获取盒模型对应的宽和高：
内联样式的样式才能取：dom.style.width/height
通过浏览器即时运行（只有IE支持）：dom.currentStyle.width/height
chorm firefox IE都支持  window.getComputedSxtyle(dom).width/height
获取元素视窗的绝对位置    dom.getBoundingClientRect().width/height

根据BFC解决边距重叠

BFC块级格式化上下文

BFC原理：
1、这个元素的垂直方向的边距会发生重叠
2、BFC的区域不会与float的元素区域重叠
3、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然
4、计算BFC的高度时，浮动子元素也参与计算

如何创建BFC：
overflow: hidden auto;// 新的BFC
float：none（默认）
positon:不为relative static(默认)
display的table相关属性table-cell  table-caption等

BFC使用场景：

问题：BFC垂直方向的边距会发生重叠（重叠时选取重叠边距的较大边距作为边距）

解决方案：给子元素创建bfc

方案依据：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。

边距不再重叠

问题：右边盒子侵占左边浮动区域

解决方案：给右边创建bfc

方案依据：BFC的区域不会与float的元素区域重叠

问题：父元素没有高度

解决方案：给父元素创建BFC

方案依据：计算BFC的高度时，浮动子元素也参与计算