HTML盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。

下面的图片说明了盒子模型(Box Model)：

css盒子模型有两种，一种是W3C盒模型也就是标准模型，另一种是IE盒模型，如下图表示：

标准模型：

IE盒模型：

由图可知：

**W3C标准模型：width = content（内容）**默认浏览器会使用标准模型。

元素总宽度 = width + 2 * padding （内边距）+ 2 * border（边框）+ 2 * margin(边距)

IE模型： width = content（内容） + 2 * padding （内边距）+ 2 * border（边框）

元素总宽度 = width + 2 * margin(边距)

css两种盒子模型的设置方法如下：

/*标准模型*/
box-sizing:content-box; 
/*IE模型*/
box-sizing:border-box;