CSS中有一種基礎(chǔ)設(shè)計模式叫盒模型，盒模型定義了Web頁面中的元素中如何來解析。CSS中每一個元素都是一個盒模型，包括html和body標(biāo)簽元素。在盒模型中主要包括width、height、border、background、padding和margin這些屬性，而且他們之間的層次關(guān)系可以相互影響，來看一張盒模型的3D展示圖：

（單擊可放大）

從圖中可以看出padding屬性和content屬性層疊background-image屬性，層疊background-color屬性，這個是存在的，它們四者之間構(gòu)成了Ｚ軸（垂直屏幕的坐標(biāo)）多重層疊關(guān)系。但是border屬性與margin屬性、padding屬性三者之間應(yīng)該是平面上的并級關(guān)系，并不能構(gòu)成Ｚ軸的層疊關(guān)系。

box-sizing：

在CSS中盒模型被分為兩種，第一種是w3c的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型，它們相同之處都是對元素計算尺寸的模型，具體說不是對元素的width、height、padding和border以及元素實際尺寸的計算關(guān)系，它們不同之處是兩者的計算方法不一致，原則上來說盒模型是分得很細的，這里所看到的主要是外盒模型和內(nèi)盒模型，如下面計算公式所示：

1. W3C標(biāo)準(zhǔn)盒模型

外盒尺寸計算（元素空間尺寸）

element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距

element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距

內(nèi)盒尺寸計算（元素大?。?

element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）

element寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）

2.IE傳統(tǒng)下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）

外盒尺寸計算（元素空間尺寸）

element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）

element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）

內(nèi)盒尺寸計算（元素大小）

element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）

element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）

在CSS3中新增加了box-sizing屬性，能夠事先定義盒模型的尺寸解析方式，其語法規(guī)則如下：

取值說明

其中最為關(guān)鍵的是box-sizing中content-box和border-box兩者的區(qū)別，他們之間的區(qū)別可以通過下圖來展示，其對盒模型的不同解析：

（單擊可放大）