CSS-标准盒模型和怪异盒模型box-sizing

盒模型

以上图为例：

在w3c标准盒模型下，

元素实际宽等于width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

元素实际高等于height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

怪异盒模型box-sizing

box-sizing；以特定的方式定义匹配某个区域的特定元素。

box-sizing可以取以下三个值：

1、border-box 边框的宽度和padding的宽度都在width内，将采用怪异模式解析计算，怪异盒模型；不会破坏整体位置布局。

但是border和padding给的值的总和，不能超过width，否则元素的实际宽度就会被撑开

2、content-box，border和padding不计算入width之内，将采用标准模式解析计算，也是默认模式

3、padding-box，padding计算入width内

ie8+浏览器支持content-box和border-box；

ff 则支持全部三个值。

两种模式的区别：

　　标准模式会被设置的padding撑开，而怪异模式则相当于将盒子的大小固定好，再将内容装入盒子。盒子的大小并不会被padding所撑开。