CSS3中的盒模型與盒模型屬性box-sizing的詳細介紹

這兩天寫的都是小知識點

因為確實有點忙
雖然很簡單，但是本著全面總結的原則，還是要說一下
今天我來說一下這個CSS中的盒模型
以及CSS3中可以改變盒模型的屬性

盒模型

盒模型是計算元素尺寸的模型規則
在我們CSS中盒模型分為兩種

W3C標準盒模型

正常情況下我們用的都是這個標準的盒模型
標準盒模型中元素尺寸使用如下計算方式
元素實際寬度 = width + padding（左右內邊距大小） + border（左右邊框大小）
元素實際高度 = height + padding（上下內邊距大小） + border（上下邊框大小）
我們設定的width和height屬性實際上是元素的content內容區的寬度與高度
設定padding和border之後元素尺寸就會變大

IE6混雜模式盒模型

IE總是那麼與眾不同
在IE6混雜模式（IE6之前更老的版本）也有自己的盒模型
它的盒模型或許更適合我們理解
我們設定的width與height屬性就是元素的實際寬度與高度
計算公式如下
元素content內容區寬度 = width - padding（左右內邊距大小） - border（左右邊框大小）
元素content內容區高度 = height - padding（上下內邊距大小） - border（上下邊框大小）
在IE6混雜模式下的盒模型下
我們設定了width和height之後
元素的寬高就定下來了
設定padding與margin會使內容區變小

再次強調，IE6 的盒模型是標準盒模型，而 IE6 混雜模式下的盒模型是非標準的
還有無論哪種盒模型，都是不包括margin外邊距的

box-sizing

CSS3增加的box-sizing屬性
允許我們規定元素使用哪種盒模型
兩個屬性值

• content-box 【W3C標準盒模型】（預設）

• border-box 【IE6混雜模式盒模型】

在我們標準盒模型下

.demo {    width: 100px;    height: 100px;    padding: 10px;    border: 5px solid black;    .....}

可以看到width與height就是我們內容區的大小
增加了padding與border後增加了元素的實際尺寸

設定box-sizing：border-box來使用IE6混雜盒模型

.demo {    width: 100px;    height: 100px;    padding: 10px;    border: 5px solid black;    .....    box-sizing: border-box; /*增*/}

設定padding與border後，內容區的寬度和高度被壓縮為70px*70px
盒的原尺寸仍然是100px*100px

box-sizing設定盒模型屬性允許我們選擇盒模型
可以使我們布局的時候更加靈活