怪异盒模型(老版本IE的盒模型) box-sizing:border-box;
标准盒模型宽度=width(内容区域大小)+padding+border
{
width: 200px;
height: 200px;
background-color: aqua;
padding: 20px;
border: 10px solid #000000;
box-sizing: border-box;
}
也就是说在标准盒模型之中本身盒子的大小+border边框像素+padding内边距像素等于最终盒子的大小
例如我们有一个标准宽度为200px的盒子，给它+10px边框+20px内边距那么最终这个盒子的大小就是
200px+10px+20px最终这个盒子的宽度为230px
怪异盒模型宽度=width=内容区域大小+padding+border
{
width: 200px;
height: 200px;
background-color: yellow;
padding: 20px;
border: 10px solid #000000;
box-sizing: border-box;
}
怪异盒模型计算方式和普通盒模型是不同的
例如我们有一个200px大小的盒子，再给盒子加上样式 box-sizing:border-box; 之后，它就是一个怪异盒模型，
现在这个盒子的宽度计算方式就已经发生改了变。
200px=170px内容宽度+10px边框+20px内边距，也就是说普通盒子转换为怪异盒模型之后，不论是＋maight
还是+padding亦或是+border这个盒子最终的大小都不会因此改变
