盒模型与BFC

1.什么是盒子模型

在html中，每一个元素都可以看成一个盒子，这个盒子由内容区（content）、填充去（padding）、边框区（border）、外边界区（margin）四部分组成。

2.盒子模型有哪两种

** 标准模式下：** 一个块的总宽度（页面中占的宽度） = width+margin（左右）+border（左右）
** 怪异模式下： ** 一个块的总宽度=width + margin（左右）（即width已经包含了padding和border值）（IE浏览器）

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

box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing: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 + "\height=" + style.height);

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

BFC规定了内部的Block Box 如何布局

定位方案：

内部的Box会在垂直方向上一个接一个放置。
Box垂直方向的距离有margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box 的左边，与包含border box 的左边相接触。
BFC的区域不会float box 重叠
BFC是页面上的一个隔离独立容器，容器里面的子元素不会影响到外面的元素。
计算BFC高度时，浮动元素也会参与计算。

满足下列条件就可触发BFC：
根元素，即html
float 的 值 不为 none （默认）
overflow 的值不为visible （默认）
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed