盒模型（Box model）

概念：首先我们都知道网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性，这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。

为什么用到盒模型：不同的盒模型计算出的盒子宽高不同，所以在网页布局的时候要清楚用的是哪个盒子模型。才能正确的计算盒子宽高、正确的布局

盒模型有两种：标准W3C盒模型（google、2F、safari、ie8及以上浏览器默认盒模型） 和 IE盒模型（IE7及以下浏览器默认）。

1.标准W3C盒模型  

包括：margin、border、padding、content(内容)。

width/hegiht = content的宽高。

2.IE盒模型  包括：margin、border、padding、content(内容)。width/height包括border和padding。

width/height = border + padding + content(内容)的宽/高

3.通过box-sizing(ie8及以上、google、2F、safari兼容)设置盒模型

 box-sizing:border-box; width/height = border + padding + content(内容)的宽/高

 box-sizing:content-box; width/hegiht = content的宽高。