盒子模型（常规盒模型、怪异盒模型）

常规盒模型（也叫内容盒模型，W3C标准盒模型）：box-sizing:content-box;

盒子的宽=content
一个块的总宽度 = content-width + padding(左右) + border(左右) + margin(左右)

怪异盒模型（也叫边框盒模型，IE盒模型）：box-sizing：border-box;

盒子的宽=content-width+padding-left+padding-right+border-left-width+border-right-width

一个块的总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

例子：

一个盒子的 margin 为 20px，border 为 1px，padding 为 10px，content 的宽为 200px、高为
50px。 假如用标准 w3c 盒子模型解释，那么这个盒子需要占据的位置为：宽 202+12+102+200=262px、高
202+12102+50=112px，盒子的实际大小为：宽 12+102+200=222px、高
12+102+50=72px； 假如用ie 盒子模型，那么这个盒子需要占据的位置为：宽 202+200=240px、高
20*2+50=70px，盒子的实际大小为：宽 200px、高 50px。