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的高度时，浮动子元素也参与计算