1：基本概念

标准模型：

盒模型由：margin、border、padding、width（width= content）

IE模型：

盒模型有：margin、width（width = content + padding + border）

2：css设置这两种模型

box-sizing:content-box;   //标准模型（浏览器默认）
box-sizing:border-box;    //IE模型

3：js获取盒模型的宽和高

1：dom.style.width/height（只能获取内联样式的宽高）
2：dom.currentStyle.width/height（渲染以后的节点的宽高，    只有IE支持）
3：window.getComputedStyle(dom).width/height（chrom等都支持，IE7、8、9报错）
4：dom.getBoundingClientRect().width/height/left/top

（计算元素的绝对位置。相对于viewport的左上角的绝对位置）

Paste_Image.png

4：BFC(边距重叠解决方案)

概念

BFC即“块级格式化上下文”。它是一个独立的渲染区域，只有block-level box 参与，
它规定了内部的block-level box如何布局，并且与这个区域外包毫不相干

哪些元素会生成BFC

1：根元素

2：float属性不为none

3：position为absolute或fixed

4：display为inline-block、table-cell、table-caption、flex、inline-flex

5：overflow不为visible

注意：

父元素生成BFC后，子元素即使浮动也参与就算