我们知道，一个元素是由四部分组成的：margin、border、padding、content，分别为外边距、边框、内边距、内容区的意思，其中content由我们写的东西和width、height属性构成的，不由属性构成的。
（图片来自网络）
其中margin外边距指的是这个元素距离紧邻它的其他元素或者浏览器边框的距离。他是一个符合属性由margin-top、margin-right、margin-bottom、margin-left组成。我们可以用这四个属性分别设置上下左右其中一处的边框，也可以使用margin符合属性直接设置。由于是复合属性，所以他的值有4种写法：
1.4个值。如果写的是四个值，如margin: 10px 20px 30px 50px;这样的话，其分别按照上右下左的顺序来设置四个外边距的大小。
2.3个值。如果写的是三个值，如margin: 10px 20px 30px;这样的话，其分别按照上、左右、下的顺序来设置四个外边距的大小，中间的那个属性值设置的是左右的外边距。
3.2个值。如果写的是两个值，如margin: 10px 20px;这样的话，其分别按照上下、左右的顺序来设置四个外边距的大小。
4.1个值。这个没什么好说的…四个方向都是这个值。
接下来，我们就说一说盒模型。
首先，盒模型的计算问题：我们现在一个盒子有10px的margin、5px的border、10px的padding和100px的content，那么这个盒子的宽高分别是多少呢？
答案是：
width = 5 + 10+ 100 + 10+ 5 = 130px;
height = 5 + 10 + 100 + 10 + 5 = 130px;
• 宽度的计算是：5px的border+40px的padding-left+100px的content+20px的padding-right+5px的border=170px；
• 高度的计算是： 5px的border+10px的padding-top+100px的content+30px的padding-bottom+5px的border=150px；
而实际上盒模型分为两种：
w3c标准盒模型：
ie盒模型：
举个例子：一个盒子的 margin 为 10px，border 为5px，padding 为 10px，content 的宽为 100px
ie盒子模型
盒子所占空间：width=10ｘ2+100=120 height=10ｘ2+100=120
盒子实际大小：width=100 height=100
标准w3c盒子模型
盒子所占空间：width=10ｘ2+5ｘ2+10ｘ2+100=150 height=10ｘ2+5ｘ2+10ｘ2 +100=150
盒子实际大小：width=100+2ｘ2+10ｘ2 =124 height=100+2ｘ2+10ｘ2=124
box-sizing的使用
如果想要切换盒模型也很简单，这里需要借助css3的box-sizing属性
box-sizing: content-box是W3C盒子模型
box-sizing: border-box是IE盒子模型
box-sizing的默认属性是content-box