盒子模型
CSS中有一種基礎(chǔ)設(shè)計(jì)模式叫盒模型，盒模型定義了Web頁(yè)面中的元素中如何來解析。CSS中每一個(gè)元素都是一個(gè)盒模型，包括html和body標(biāo)簽元素。在盒模型中主要包括width、height、border、background、padding和margin這些屬性，而且他們之間的層次關(guān)系可以相互影響，來看一張盒模型的3D展示圖：
從圖中可以看出padding屬性和content屬性層疊background-image屬性，層疊background-color屬性，這個(gè)是存在的，它們四者之間構(gòu)成了Ｚ軸（垂直屏幕的坐標(biāo)）多重層疊關(guān)系。但是border屬性與margin屬性、padding屬性三者之間應(yīng)該是平面上的并級(jí)關(guān)系，并不能構(gòu)成Ｚ軸的層疊關(guān)系。
box-sizing：
在CSS中盒模型被分為兩種，第一種是w3c的標(biāo)準(zhǔn)模型，另一種是IE的傳統(tǒng)模型，它們相同之處都是對(duì)元素計(jì)算尺寸的模型，具體說不是對(duì)元素的width、height、padding和border以及元素實(shí)際尺寸的計(jì)算關(guān)系，它們不同之處是兩者的計(jì)算方法不一致，原則上來說盒模型是分得很細(xì)的，這里所看到的主要是外盒模型和內(nèi)盒模型，如下面計(jì)算公式所示：
W3C標(biāo)準(zhǔn)盒模型
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距
內(nèi)盒尺寸計(jì)算（元素大小）
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+”）
外盒尺寸計(jì)算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
內(nèi)盒尺寸計(jì)算（元素大?。?br/>
element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
在CSS3中新增加了box-sizing屬性，能夠事先定義盒模型的尺寸解析方式，其語(yǔ)法規(guī)則如下：
box-sizing: content-box | border-box | inherit
屬性值 | 屬性值說明 |
content-box | 默認(rèn)值，其讓元素維持W3C的標(biāo)準(zhǔn)盒模型，也就是說元素的寬度和高度（width/height）等于元素邊框?qū)挾龋╞order）加上元素內(nèi)距（padding）加上元素內(nèi)容寬度或高度（content width/ height），也就是element width/height = border + padding + content width / height |
border-box | 重新定義CSS2.1中盒模型組成的模式，讓元素維持IE傳統(tǒng)的盒模型（IE6以下版本和IE6-7怪異模式），也就是說元素的寬度或高度等于元素內(nèi)容的寬度或高度。從上面盒模型介紹可知，這里的內(nèi)容寬度或高度包含了元素的border、padding、內(nèi)容的寬度或高度（此處的內(nèi)容寬度或高度＝盒子的寬度或高度—邊框—內(nèi)距）。 |
inherit | 使元素繼承父元素的盒模型模式 |
其中最為關(guān)鍵的是box-sizing中content-box和border-box兩者的區(qū)別，他們之間的區(qū)別可以通過下圖來展示，其對(duì)盒模型的不同解析：
