【解析】

问题简答

标准模型和ie模型的区别是计算宽width高height的不同。

1.标准模型width不计算padding和border；
2.ie模型width计算padding 和border；

知识解析

标准盒模型（W3C盒子模型）

设置的宽高是对实际内容content的宽高进行设置，内容周围的border和padding另外设置;

即元素实际占位的宽高为：

width【height】= 设置的content的宽【高】 + padding + border + margin

可以通过实例来理解：写一个div，同时设置了宽、高、边框、内边距、外边距；

//注：如果下面示例未写html和css,说明与此处相同
.box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px;
margin: 40px;
background: #66FFFF;
}
<div class="box">Axjy</div>

效果及Chrome的开发者工具中显示的盒模型如下：

可以看到content部分即为100×100，内容周围都是另外设置的，width=40+10+30+100+30+10+40=180；

IE盒子模型（怪异盒模型）

设置的宽高是对实际内容content + 内边距（padding）+边框（border）之和的width和height进行设置的;

即元素实际占位的宽高为：

width（height）= 设置的width（height）+外边距margin

和上面使用同样的例子，但是通过设置box-sizing:border-box;，把它变为IE盒模型；

.box {
width: 100px;
height: 100px;
border: 10px solid #CC9966;
padding: 30px;
margin: 40px;
background: #66FFFF;
box-sizing: border-box;//注意
}
<div class="box">Axjy</div>

效果及Chrome的开发者工具中显示的盒模型如下：

可以很明显的看到，正方形和上面的比小了一圈，width=40+10+30+20+30+10+40=100;