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的值   等于說怪異盒模型的寬度和大小可以說是相等的