一剔猿、概念（以下來(lái)源MDN）
CSS 基礎(chǔ)框盒模型：CSS 規(guī)范的一個(gè)模塊专甩，它定義了一種長(zhǎng)方形的盒子——包括它們各自的內(nèi)邊距（padding）與外邊距（margin ）俭正，并根據(jù)視覺(jué)格式化模型來(lái)生成元素谷扣，對(duì)其進(jìn)行布置、編排芹彬、布局（lay out）庵芭。常被直譯為盒子模型、盒模型或框模型雀监。
CSS 視覺(jué)格式化模型:用來(lái)處理和在視覺(jué)媒體上顯示文檔時(shí)使用的計(jì)算規(guī)則
二、什么是盒子模型
1.它是一種CSS規(guī)范眨唬，名稱為CSS basic box model会前，被翻譯成盒子模型（在CSS1它的名字叫Formatting model，CSS2的初版定義叫Box model匾竿，目前叫CSS basic box model瓦宜，大概意思就是本來(lái)沒(méi)有盒子模型這個(gè)詞，叫的人多了規(guī)范就變了岭妖。）
2.它的具體內(nèi)容見(jiàn)CSS 基礎(chǔ)框盒模型介紹
3.內(nèi)容簡(jiǎn)述：
- 它將HTML中的元素用矩形盒子表示
-
每個(gè)盒子由四個(gè)部分組成（content临庇、border、margin昵慌、padding）
image.png
三假夺、標(biāo)準(zhǔn)盒模型與IE盒模型
盒子模型由四個(gè)部分組成，每個(gè)部分都有其屬性斋攀，其中內(nèi)容區(qū)有三個(gè)屬性已卷，width、height 和overflow淳蔼。不同的盒模型分歧出現(xiàn)在width侧蘸、height的含義上面。
3.1 標(biāo)準(zhǔn)盒模型
標(biāo)準(zhǔn)盒模型是指W3C為CSS語(yǔ)言推薦的標(biāo)準(zhǔn)方式鹉梨，參考前面2點(diǎn)讳癌。
標(biāo)準(zhǔn)盒模型堅(jiān)持認(rèn)定width、height就應(yīng)該表示的是內(nèi)容區(qū)的屬性存皂，因此瀏覽器中真實(shí)所占的寬度和高度為padding + border + width晌坤。
測(cè)試代碼如下所示：
<div style="background-color:green;display:inline-block;
margin: 10px;
padding: 20px;
border: 5px solid red;
width: 100px;height:100px;">內(nèi)容區(qū)域</div>
示例圖如下圖所示：
由上可見(jiàn)，width、height就是內(nèi)容區(qū)的寬高泡仗，真實(shí)高寬變成了150埋虹。
3.2 IE盒模型
在IE6之前的IE瀏覽器都是默認(rèn)使用IE盒模型，IE6及其以上的版本在標(biāo)準(zhǔn)兼容模式下使用的是標(biāo)準(zhǔn)盒模型娩怎，但是仍然支持IE盒模型搔课。
IE盒模型與標(biāo)準(zhǔn)盒模型的區(qū)別就是它堅(jiān)持認(rèn)為width、height指的是盒子的寬度高度（即屬性設(shè)置的瀏覽器中的真實(shí)寬高）截亦。用過(guò)box-sizing:border-box;應(yīng)該會(huì)有體會(huì)爬泥，這種屬性對(duì)于開(kāi)發(fā)者來(lái)說(shuō)還是很方便的。
在IE盒模型下崩瓤，盒子的表現(xiàn)如下圖：
可以看見(jiàn)內(nèi)容區(qū)被壓縮了袍啡，此時(shí)瀏覽器中真實(shí)寬高=(width,height)正好是我們?cè)O(shè)置的，很多情況下却桶，我們不會(huì)關(guān)心內(nèi)容區(qū)域的寬高境输，只會(huì)關(guān)心元素在瀏覽器中的寬高。如果壓縮之后內(nèi)容區(qū)域不夠顯示內(nèi)容怎么辦呢颖系？這時(shí)可以設(shè)置overflow來(lái)調(diào)整嗅剖。
四、兩種盒模型的切換
CSS中的 box-sizing 屬性定義了 user agent應(yīng)該如何計(jì)算一個(gè)元素的總寬度和總高度嘁扼。
- border-box （IE盒模型）
- content-box (標(biāo)準(zhǔn)盒模型)
五信粮、補(bǔ)充
外邊距也屬于盒子的一部分，但是寬度和高度計(jì)算是不包括外邊距的（margin）
六趁啸、總結(jié)
- 盒子模型是一種CSS規(guī)范
- 盒子模型規(guī)定一個(gè)元素由4個(gè)部分組成（content强缘、border、margin不傅、padding）
- 有兩種盒模型旅掂，在CSS3中可以通過(guò)
box-sizing屬性自由設(shè)置 - 不同盒模型的區(qū)別在于
width、height屬性的計(jì)算方式上访娶、標(biāo)準(zhǔn)盒模型認(rèn)為width辞友、height是內(nèi)容區(qū)的，但是IE盒模型認(rèn)為是指盒子的震肮。
參考
CSS 基礎(chǔ)框盒模型
CSS 基礎(chǔ)框盒模型介紹
視覺(jué)格式化模型
百度百科-CSS盒子模型
百科-IE盒模型缺陷
CSS box-sizing
