（注1：如果有問題歡迎留言探討敬拓，一起學(xué)習(xí)邻薯！轉(zhuǎn)載請注明出處，喜歡可以點(diǎn)個(gè)贊哦３送埂）
（注2：更多內(nèi)容請查看我的目錄厕诡。）
1. 簡介
還記得開幕式的例子嗎？假設(shè)網(wǎng)頁是一個(gè)隊(duì)伍营勤，那么元素就是其中的一個(gè)個(gè)隊(duì)員灵嫌。每個(gè)隊(duì)員有高有矮，有胖又瘦葛作，隊(duì)員之間的距離有遠(yuǎn)有近寿羞，組成一個(gè)理想的隊(duì)形。網(wǎng)頁中的元素是什么形狀呢赂蠢？這里再舉個(gè)例子绪穆，不知道大家有沒有見到過快遞柜？現(xiàn)在快遞員經(jīng)常會(huì)將你的快遞放到快遞柜中通知你去取虱岂。元素就像快遞柜的格子一樣玖院。假設(shè)你購買了一雙鞋，鞋盒外面包裹有一層快遞盒量瓜，鞋盒是實(shí)際你當(dāng)時(shí)購買的內(nèi)容司恳，和快遞盒的距離是內(nèi)邊距途乃，盒子外表面到隔壁柜子外表面的距離就是外邊距了绍傲。可以看下面這張圖：
上圖中耍共，我們只考慮快遞紙箱會(huì)有厚度烫饼，鞋盒以及柜子的厚度忽略不計(jì)，并且元素盒模型不像現(xiàn)實(shí)中的快遞一樣有重力屬性试读，底部是可以不必緊貼在一起的杠纵。我們來看一下抽象后的元素盒模型。
不同部分的說明如下：
- margin(外邊距) - 清除邊框外的區(qū)域钩骇，外邊距是透明的比藻。
- border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框铝量。
- padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的银亲。
- content(內(nèi)容) - 盒子的內(nèi)容慢叨，顯示文本和圖像。
2. 各執(zhí)一詞的W3C標(biāo)準(zhǔn)盒模型與IE盒模型
設(shè)想你是一位快遞運(yùn)輸員务蝠，需要在你的貨車撞上需要運(yùn)輸?shù)呢浳锱男场3C快遞公司的是按貨物的實(shí)際大小計(jì)價(jià)的，你只知道貨物的實(shí)際大小馏段，還需要根據(jù)包裹貨物的盒子厚度轩拨，盒子與實(shí)際貨物的間隙來計(jì)算該快遞包裹的實(shí)際占據(jù)空間。而當(dāng)你精疲力盡擺好貨物以后院喜，顧客要求為他的貴重物品填充更多的保護(hù)泡沫亡蓉，更換更厚的紙箱，你將要重新計(jì)算它的大小喷舀，重新擺放寸宵。想想都覺得麻煩。
而IE快遞公司讓收件員收貨的時(shí)候?qū)⒖爝f打包元咙，根據(jù)包裹的大小計(jì)價(jià)梯影，并告知你包裹的寬高，你只需要關(guān)注這個(gè)寬高以及包裹之間的距離即可庶香，不用管里面包裹的物品甲棍，紙箱的厚度，或者紙箱和實(shí)際貨品的間隙有多大赶掖。
你會(huì)選擇就職于哪家公司呢感猛？是的，被人吐槽的IE快遞公司在這里的設(shè)計(jì)更為符合常理奢赂。我們來看一下兩種盒模型的詳細(xì)說明陪白。
2.1 W3C標(biāo)準(zhǔn)盒模型
從上圖可以看出，對于W3C盒模型：
總寬度 = width + padding + border + margin
總高度 = height + padding + border + margin
更具體來講應(yīng)該是如下公式：
總寬度 = width + padding-left +border-left + margin-left + padding-right + border-right + margin-right
總高度 = height + padding-top + border-top + margin-top + padding-bottom + border-bottom + margin-bottom
2.2 IE盒模型
從上圖可以看出膳灶，對于IE盒模型：
總寬度 = width + margin
總高度 = height + margin
更具體來講應(yīng)該是如下公式：
總寬度 = width + margin-left + margin-right
總高度 = height + margin-top + margin-bottom
3. box-sizing屬性介紹
從第2節(jié)內(nèi)容我們看到咱士，IE盒模型使用起來較W3C標(biāo)準(zhǔn)盒模型更為方便。因此轧钓，CSS3中提供了一個(gè)新的屬性序厉，box-sizing，來控制和模型的表現(xiàn)形式毕箍。box-sizing有三個(gè)取值弛房，分別是content-box，border-box和inherit而柑。
（注：其實(shí)還有一個(gè)padding-box文捶，width和height屬性包括內(nèi)容和內(nèi)邊距荷逞，但是不包括邊框和外邊距。只有Firefox實(shí)現(xiàn)了這個(gè)值粹排，它在Firefox 50中被刪除颅围。）
- content-box
默認(rèn)值，表現(xiàn)形式同W3C標(biāo)準(zhǔn)和模型恨搓。 - border-box
表現(xiàn)形式同IE盒模型院促，常用值，經(jīng)常在css-reset中設(shè)置斧抱。 - inherit
規(guī)定應(yīng)從父元素繼承box-sizing屬性的值常拓。
參考
深入理解盒模型
CSS 盒子模型
css 盒子模型理解
想要清晰的明白（一）： CSS視覺格式化模型|盒模型|定位方案|BFC
CSS 布局_1 盒模型
學(xué)會(huì)使用box-sizing布局
box-sizing
盒子模型
