盒模型之我的理解

如上图所示，一个标准的盒模型由四个部分组成：margin（外边距）、border（边框）、padding（内边距）、content（内容）。

margin控制盒子与盒子的间距，padding控制边框与内容的间距。

padding会改变盒子的大小，但不会改变内容的大小，因此在设置盒模型的大小时要考虑到padding的影响。

盒模型分为2种：标准盒模型、怪异盒模型。

盒模型会在DOCTYPE声明的时候默认标准盒模型，而没有DOCTYPE则会在ie6\7\8形成怪异盒模型。

标准盒模型的宽/高=width/height+padding+border

怪异盒模型的宽/高=width/height=内容的宽/高+padding+border，怪异盒模型的内容宽高会被padding和border占据。

(由于我理解的盒子宽高不包括margin，所以上面的计算中未加上margin)

那么，如何转换标准盒模型和怪异盒模型呢？

通过设置box-sizing：content-box/border-box；

content-box是转换标准盒模型，border-box是转换怪异盒模型。