在css的發(fā)展歷程中，有兩種版本的盒模型，一個(gè)叫IE盒模型（又叫怪異盒模型），一個(gè)叫W3C標(biāo)準(zhǔn)盒模型，在早期的微軟出的IE瀏覽器中采用的是自己的盒模型標(biāo)準(zhǔn)成為IE盒模型或者叫怪異盒模型(此模型只會(huì)出現(xiàn)在IE5.5及其更早的版本中咐汞。只要為文檔設(shè)置一個(gè)DOCTYPE，就會(huì)使得IE遵循標(biāo)準(zhǔn)兼容模式的方式工作
)儒鹿。
IE5.5及更早的版本使用的是IE盒模型化撕，后來(lái)微軟也慢慢轉(zhuǎn)向了W3C的標(biāo)準(zhǔn)，在IE6以后支持了W3C標(biāo)準(zhǔn)盒模型约炎。在我們現(xiàn)在的主流瀏覽器里面默認(rèn)都是使用w3c標(biāo)準(zhǔn)盒模型植阴。
1、css盒子模型概念
CSS css盒子模型 又稱(chēng)框模型 (Box Model) 圾浅，包含了元素內(nèi)容（content）掠手、內(nèi)邊距（padding）、邊框（border）狸捕、外邊距（margin）幾個(gè)要素喷鸽。
1.1標(biāo)準(zhǔn)盒子模型
圖中最內(nèi)部的框是元素的實(shí)際內(nèi)容，也就是元素框灸拍，緊挨著元素框外部的是內(nèi)邊距padding做祝，其次是邊框（border），然后最外層是外邊距（margin）鸡岗，整個(gè)構(gòu)成了框模型混槐。通常我們?cè)O(shè)置的背景顯示區(qū)域，就是內(nèi)容轩性、內(nèi)邊距纵隔、邊框這一塊范圍。而外邊距margin是透明的炮姨，不會(huì)遮擋周邊的其他元素。
元素框的總寬度 = 元素（element）的width + padding + margin +border碰煌；
元素框的總高度 = 元素（element）的height + padding +margin +border舒岸。
CSS中的寬（width）=內(nèi)容（content）的寬
CSS中的高（height）=內(nèi)容（content）的高
1.2 IE盒子模型
CSS中的寬（width）=內(nèi)容（content）的寬+（border+padding）
CSS中的高（height）=內(nèi)容（content）的高+（border+padding）
2、css 外邊距合并（疊加）
兩個(gè)上下方向相鄰的元素框垂直相遇時(shí)芦圾，外邊距會(huì)合并蛾派，合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距中較高的那個(gè)邊距值，如圖：
比較容易理解，所以在頁(yè)面中有時(shí)候遇到實(shí)際情況是需要考慮這個(gè)因素的洪乍。當(dāng)然外邊距合并其實(shí)也有存在的意義眯杏，如下圖：
需要注意的是：只有普通文檔流中塊框的垂直外邊距才會(huì)發(fā)生外邊距合并。行內(nèi)框壳澳、浮動(dòng)框或絕對(duì)定位之間的外邊距不會(huì)合并岂贩。
3、box-sizing屬性介紹
box-sizing屬性是用戶(hù)界面屬性里的一種巷波，之所以介紹它萎津，是因?yàn)檫@個(gè)屬性跟盒子模型有關(guān)，而且在css reset中有可能會(huì)用到它抹镊。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默認(rèn)值锉屈，可以使設(shè)置的寬度和高度值應(yīng)用到元素的內(nèi)容框。盒子的width只包含內(nèi)容垮耳。
即總寬度=margin+border+padding+width
(2) border-box ,
設(shè)置的width值其實(shí)是除margin外的border+padding+element的總寬度颈渊。盒子的width包含border+padding+內(nèi)容
即總寬度=margin+width
很多CSS框架，都會(huì)對(duì)盒子模型的計(jì)算方法進(jìn)行簡(jiǎn)化终佛。
(3) inherit , 規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值
關(guān)于border-box的使用：
1 一個(gè)box寬度為100%俊嗽，又想要兩邊有內(nèi)間距，這時(shí)候用就比較好
2 全局設(shè)置 border-box 很好查蓉，首先它符合直覺(jué)乌询，其次它可以省去一次又一次的加加減減，它還有一個(gè)關(guān)鍵作用——讓有邊框的盒子正常使用百分比寬度豌研。
