盒模型与BFC简介

1、盒模型概念：

在HTML页面中，每一个元素都可以被看成是一个盒子，该盒子分别由四部分组成：即内容（content）、内边距（padding）、边框（border）、外边距（margin）。

2、盒模型类型：

标准盒模型：content-box（又名W3C 盒模型）元素的宽高大小表现为内容（content）的大小。

怪异盒模型：border-box（又名IE 盒模型）元素的宽高表现为内容（content） + 内边距*2 （padding）+ 边框*2（border）的大小。背景会延伸到边框的外沿。

3. 标准和怪异模型的转换

通过box-sizing属性来实现转换，content-box为标准盒模型，border-box怪异盒模型，inherit表示从父元素继承 box-sizing 属性的值。

4. JS盒模型

获取和设置box的内容宽高的方法
IE： dom.currentStyle.width/height

非IE: window.getComputedStyle(dom).width/height

var obj = document.getElementById("box");

var style = null;
if (window.getComputedStyle) {
    style = window.getComputedStyle(obj, null);    // 非IE
} else { 
    style = obj.currentStyle;  // IE
}
alert("width=" + style.width + "\nheight=" + style.height);

5. 盒模型产生的双边距重合问题解决

详见另一篇博客BFC