标准盒模型与怪异盒模型的区别

声明：本人学识有限，文中如有错误或不当之处，请各位指出，谢谢！

在我的理解中标准盒模型与怪异盒模型差别就是width的区别，其中：

标准盒模型

总长=width+padding（左右）+border（左右）+margin（左右）

这里的width就是内容区了，是书写显示的区域，也就是下图中A的长度。

在标准盒模型中，当width不变时，padding（左右）和borde（左右）的改变都是要改变总长的。

也就是说盒模型的总长会在width不变的情况下，增加或减少padding（左右）和border（左右）都是会改变总长大小的。

怪异盒模型

总长=width+margin（左右）

这里的width等于padding（左右）加书写区加上border（左右），也就是下图中B的长度。

而在怪异盒模型的总长中width的大小不变时，padding（左右）和border（左右）的改变只在width中变化，不会改变总长的。

当设置box-sizing:content-box时，为标准模式，也是默认模式；
当设置为box-sizing:border-box时，为怪异模式；