css盒子模型

在 CSS 的盒子模型中，有两个重要的选项：box-sizing:content-box 和 box-sizing:border-box，content-box 被称为正常盒子模型，采用标准模式解析计算，也是默认模式；border-box 被称为怪异盒子模型，采用怪异模式解析计算；

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

标准模式：盒子占位总宽度/高度 = 内容区宽度 /高度+padding+border + margin 。

怪异模式：盒子占位总宽度/高度 = width/height + margin 。

 

 

 

 切换模式属性：box-sizing 

标准模式：content-box   标准盒模型的 width = content（内容区的宽度）。   盒子的实际大小 = border + padding + content内容大小（我们自己设置的宽高）

怪异模式（css3盒模型）：border-box    怪异盒模型的 width = content + padding + border 。内容的宽度 =我们设置的宽度减去 border和padding的值   等于说怪异盒模型的宽度和大小可以说是相等的