盒模型

1.盒模型的基本概念

盒子模型是用来存放网页中的各种元素 在网页当中各种元素，如图片丶文字等元素，都可是盒子（div嵌套） css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。

2.盒模型的分类

盒模型分为：标准w3c盒模型、IE盒模型、以及css中的伸缩盒模型

标准盒模型
在标准模式下的盒模型如下图所示，盒子总宽度/高度=width/height+padding+border+margin

怪异盒模型
在怪异模式下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的

盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;

也即是说width = 内容区宽度 + padding + border

CSS3的box-sizing属性
语法：

box-sizing : content-box || border-box || inherit;
当为content-box时，将采取标准模式进行解析计算
当为border-box时，将采取怪异模式解析计算
当为inherit时，将从父元素来继承box-sizing属性的值