我們開啟的任何一個網頁，所有頁面中的元素都可以看成是一個盒子，佔據著一定的頁面空間。一個頁面由很多這樣的盒子組成，這些盒子之間會互相影響。

盒子模型的種類可以分為兩大類：

• 標準盒子：一個盒子塊的總寬度= width + margin(左右) + padding(左右) + border(左右)
• 怪異盒子：一個盒子塊的總寬度=width + margin(左右)（即width已經包含了padding和border值）

1. ie盒子模型

1. 標準的盒子：

在css3中box-sizing：

box-sizing語法：

box-sizing ： content-box || border-box || inherit;

• 當設定為box-sizing:content-box時，將採用標準模式解析計算，也是預設模式；

• 當設定為box-sizing:border-box時，將採用怪異模式解析計算；