1.那什么是盒模型呢？
简单的理解为，你可以把每个html标签当成一个小方块，然后这个小方块又包着几个小方块，如同盒子一层一层包着，这就是所谓的盒模型。
盒模型分为IE盒模型和W3C标准盒模型。
IE盒模型和W3C标准盒模型有什么区别呢？
1.W3C标准盒模型
属性width,height只包含内容content，不包含border和padding
width = 内容的宽度
height = 内容的高度
2.IE盒模型
属性width，height包含border和padding，指的是content+padding+border.
width = border + padding + 内容的宽度
height = border + padding + 内容的高度
我们来通过代码对其进行理解更直观，如下：
.item{
width: 200px;
height: 200px;
background-color: cornflowerblue;
}
.item{
width: 200px;
height: 200px;
background-color: cornflowerblue;
padding:20px
}
那么此时，你可以看到下面的宽高都比上图多40px，也就说设置了padding以后，盒子的大小等于content+padding，接下来再看看border。
.item{
width: 200px;
height: 200px;
background-color: cornflowerblue;
padding:20px；
border: lavender 10px solid;
}
此时可以发现此时的宽高比上面的一幅图多20px,那么也就是说在设置了border以后，盒子的大小等于content + padding + border.那么margin呢， margin和宽高有关系嘛?
.item{
width: 200px;
height: 200px;
background-color: cornflowerblue;
padding:20px；
border: lavender 10px solid;
margin-bottom:20px;
}
如图所示，盒子的长宽还是260*260，也就是说大小没有变化，但是盒子底部与下面的方块产生了20px的空白间隙，所以可以得出对于IE盒模型来说，盒子的大小等于content + padding + border决定的，margin是不会改变盒子的大小，所以说margin代表的是盒子所占据的位置。
刚刚我们说的是在IE盒模型的情况下盒子大小的计算，那么此时我们把box-size属性设置成border-box，会发现什么呢？
你会发现盒子的padding、border仍在，但是盒子的大小却变成了200*200，然后你会发现无论我们怎么设置padding、border，盒子的大小始终不会变。这个时候我们要介绍下box-size这个属性了。
box-size： border-box | content-box | inherit
content-box（默认）:在宽度和高度之外绘制元素的内边距以及边框
border-box:在已设定好的宽度和高度内绘制元素的内边距以及边框
inherit:继承父元素box-sizing属性的值
根据不同的属性值进行不同的绘制，现在都明白了嘛？
我们在编写页面代码的时候尽量使用标准的W3C盒模型（需在页面中声明DOCTYPE模型），这样可以避免多个浏览器对同一界面的不兼容。
注意，这里若不声明DOCTYPE类型，IE浏览器会将盒子模型解释为IE盒模型，FireFox等将会解释为W3C盒模型；若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。
具体的使用哪种模式视使用场景决定。
