CSS盒模型

一、标准模型和IE模型的区别：
IE模型的宽度和高度包含pading和border。
二、CSS如何设置这两种模型：

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

三、JS获取盒模型的宽和高：

dom.style.width/height   //取内联样式的宽高，获取不到link外联的样式
dom.currentStyle.width  //只有IE支持，获取渲染之后的结果
window.getComputedStyle(dom).width  //兼容性更好
dom.getBoundingClientRect().width/height //根据viewport视窗计算元素的绝对位置

四、盒模型解释边距重叠

	边距重叠解决方案：BFC 块级格式上下文
	
	BFC的原理/渲染规则： 
	- 垂直元素边距重叠
	- 不会与浮动元素box重叠   ——>  解决清除浮动
	- 是一个独立容器
	- 浮动元素也会参与计算高度
	创建BFC： 
	- overflow:hidden，auto
	- float值不为none；
	- position的值不是static或relative；
	- display属性为table-cell