1、盒模型的概念

CSS 盒子模型又稱框模型，包含元素內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）幾個要素

1.1、標準盒模型和 IE 盒模型

盒模型是有兩種標準的，標準盒模型和 IE 盒模型

標準盒模型（box-sizing: content-box）：

IE 盒模型（box-sizing: border-box）：

1.2、CSS盒模型和IE盒模型的區(qū)別

在標準盒子模型中，設置 width 和 height 的話設置的就只是內容區(qū)（content）的寬度， padding 和 border 并不包括在里面。但是在 IE 盒子模型中，當你設置了 width 或者 height，此時設置的寬度就包括了padding 和 border ，比如說你設置了 width 為100，padding為 5，那么內容區(qū)只有 90。

1.3、box-sizing 設置盒模型

通過 box-sizing 屬性可以設置一個元素是用什么盒模型：content-box 表示標準盒模型，border-box 表示 IE 盒模型。

.className {
　　/* 標準模型 */
　　box-sizing:content-box;
　 /*IE模型*/
　　box-sizing:border-box;
}

下面是設置了 width 為100px，padding、border、margin 分別為 5px 時標準盒模型和 IE 盒模型的情況：

標準盒模型（box-sizing: content-box）：可以看到內容區(qū)寬度不變，仍然為 100px

IE 盒模型（box-sizing: border-box）：可以看到內容區(qū)寬度因為 padding 和 border 的寬度而發(fā)生了改變

所以說，如果我們設置了一個元素的高度和寬度為固定像素，如果此時是標準盒模型的話，此時內容區(qū)的寬度和高度都不會因為 margin 和 padding 和發(fā)生改變，但是 margin 和 padding 會影響到該元素在頁面內所占據的空間大小。

而如果此時我們設置的是IE盒模型的話，該元素在頁面內所占據的空間大小不會隨著 padding 的改變而改變，但是內容區(qū)的大小會因為 padding 而發(fā)生改變。