一、什么是css盒子模型呢？
我们可以把css盒子模型当成日常中的一个盒子去理解。然后css盒子模型由里到外包括：content（内容）,padding（内边距）,border（边框）,margin（外边距）四部分，如下面图片所示。
content就是盒子里装的东西，然后它有高度（height）和宽度（width）,可以是图片，也可以是文字或者小盒子嵌套。
padding即是填充，就好像我们为了保护快递盒子里面的东西不被损坏，会往里面填充了一些气泡膜等。内边距padding，就是边框与内容之间的距离。
border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。
margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子与盒子之间的距离。
二、css盒子模型有两种，一种是W3C盒模型（标准盒子模型），另一种是IE盒模型（怪异盒子模型）。
W3C盒模型：
- 在标准盒子模型中，标准盒子模型的总宽度： width = width + padding * 2 + border * 2 + margin * 2 。默认box-sizing: content-box;
IE盒模型：
- IE盒子模型中，怪异盒子模型 width = width(border * 2 + padding * 2 + content的宽度) + margin * 2。怪异盒子模型 box-sizing: border-box;
