首先盒模型分为两大类：一是标准浏览器的盒模型，二是怪异盒模型，即IE浏览器的盒模型。两种盒模型都是由四大样式组成的，即由外向内分别为：margin、border、padding、内容尺寸width/height。但是两者是有不同的。如下图所示：
标准浏览器的盒模型
标准浏览器的盒模型分为三大块，一是内容尺寸，二是盒子尺寸，三是区域尺寸。内容尺寸是指上图中心的蓝色区域，1904*132（不同元素的内容尺寸不同）。盒子的尺寸宽度是内容尺寸的宽度+两边的padding+两边的border，高度同理。区域尺寸是指盒子的尺寸再加上两边的margin值。
IE浏览器的盒模型
怪异盒模型的话呢，它的内容尺寸就包括了padding值和border值，所以怪异盒模型的区域尺寸就是内容尺寸加上两边的margin值。盒子实际尺寸就是width*height。
这就是两种盒模型的区别以及相同点。