盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

盒子模型具有属性：

1. content内容
2. padding内边距
3. border边框
4. margin外边框

如下图：

其实，可以将盒子模型当作一个盒子去理解。

1. content是盒子里面装的东西
2. padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。
3. border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。
4. margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。

CSS盒子模型又分为两种：

1. 标准盒子模型

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

标准盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分

2. IE盒子模型

/*IE模型*/
box-sizing:border-box;

IE盒子模型的范围包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.