CSS 盒子模型將所有的元素表示為一個(gè)矩形的盒子，模型定義了盒的每個(gè)部分：
Content box: 這個(gè)區(qū)域是用來顯示內(nèi)容吞鸭，大小可以通過設(shè)置 width 和 height寺董；
Padding box: 包圍在內(nèi)容區(qū)域外部的空白區(qū)域； 大小通過 padding 相關(guān)屬性設(shè)置刻剥；
Border box: 邊框盒包裹內(nèi)容和內(nèi)邊距遮咖。大小通過 border 相關(guān)屬性設(shè)置；
Margin box: 這是最外面的區(qū)域造虏，是盒子和其他元素之間的空白區(qū)域御吞。大小通過 margin 相關(guān)屬性設(shè)置。
CSS 盒子模型分為 IE 盒模型和 W3C 標(biāo)準(zhǔn)盒模型漓藕。
瀏覽器中使用哪個(gè)盒模型可以由 box-sizing（CSS 新增的屬性）控制陶珠，默認(rèn)值為 content-box，即標(biāo)準(zhǔn)盒模型享钞；
如果將 box-sizing 設(shè)為 border-box 則用的是 IE 盒模型揍诽。
W3C 標(biāo)準(zhǔn)盒模型
在標(biāo)準(zhǔn)模型中，如果你給盒設(shè)置 width 和 height栗竖，實(shí)際設(shè)置的是 content box暑脆。
即屬性 width，height 只包含內(nèi)容 content划滋，不包含 border 和 padding饵筑。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
標(biāo)準(zhǔn)模型寬度 = 350px + 25px + 25px + 5px + 5px = 410px；
標(biāo)準(zhǔn)模型高度 = 150px + 25px + 25px + 5px + 5px = 210px处坪。
IE 盒模型
在 IE 模型中根资，屬性 width，height 包含 border 和 padding同窘，指的是 content + padding + border玄帕。
.box {
width: 350px;
height: 150px;
margin: 25px;
padding: 25px;
border: 5px solid black;
}
IE 盒模型寬度 = width = 350px；
IE 盒模型高度 = width = 150px想邦。
注: margin 不計(jì)入實(shí)際大小 —— 當(dāng)然裤纹，它會(huì)影響盒子在頁面所占空間，但是影響的是盒子外部空間丧没。
盒子的范圍到邊框?yàn)橹?—— 不會(huì)延伸到 margin鹰椒。
