IE盒模型和W3C盒模型的区别

什么是盒模型?
可以说，页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。

但是，盒模型有标准盒模型和IE的盒模型。如果你打出来这两种，那么肯定会问两者的区别是什么？我们先来看两张图：
在这里插入图片描述

通过这两张图片我们可以很直观的看出两者的区别。不同之处就是标准盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小。

box-sizing:border-box; 这个代码可以把W3C的盒模型改成IE的盒模型。