标准盒模型：content（内容区）+padding（填充区）+border（边框）+margin（外边距)
怪异盒模型：width{content（内容区）+padding（填充区）+border（边框）}+margin（外边距）
标准盒模型和怪异盒模型本质上都是一个盒子，它们的区别就是计算宽度和高度的不同。
标准盒模型是盒子的总宽度=内容区+填充区+边框+外边距，它的内容区是不包含填充区和边框的；
怪异盒模型是盒子的总宽度=内容区+外边距,，它和标准盒模型相反，它的内容区是包含填充区和边框的；
在CSS中，可以用box-sizing去定义元素的盒模型是标准盒模型还是怪异盒模型，如下图：
当我给box1设置成box-sizing=content-box，给box2设置成box-sizing=border-box的时候，给两个div设置了同样的宽高和属性，但是两个盒子的大小却不一样，这就是标准盒模型和怪异盒模型的区别所在，通过上图能看出来，怪异盒模型的宽高是包含padding和border值的。
那如果想在怪异盒模型的基础上，让它和标准盒模型一样的大小，那就需要把怪异盒模型的宽高值里边加上padding值和border值，这样，怪异盒模型才会和标准盒模型的大小一样；如下图：
当我给怪异盒模型的宽高加上padding值和border值之后，它就和怪异盒模型的大小一样了。