css盒模型

標籤：blog   http   使用   ar   sp   2014   問題   on   c   

CSS盒模型有兩種，1是W3C標準的盒模型（chrome firefox ie6+等） 2是IE傳統的盒模型（IE 5.5-）

 

盒模型又分外盒模型與內盒模型：（這裡只以寬度計算規則為例，高度類似略）

W3C標準的內盒寬度=內容寬度+padding+border

W3C標準的外盒寬度=內容寬度+padding+border+margin

預設情況下（box-sizng為content-box）內容寬度就是width值)

 

IE傳統的內盒寬度=內容寬度

IE傳統的外盒寬度=內容寬度+margin

這裡的內容寬度就是width的值，但是width值已經包括了padding和border在內。

 

下面是圖示

從圖示我們可以看到，W3C的內容高度就等於IE的內盒高度。

 

我們知道IE6開始都是W3C標準的盒模型，為什麼還要去關注IE 5.5的盒模型呢？這是因為IE 5.5盒模型確實還是在被使用。預設情況下，表單中的元素如input中的submit button reset，select，button標籤，都是基於傳統的盒模型。因此，我們在調整這些表單元素的padding、border、width、height等值時，經常會疑惑，為什麼明明是相同的padding、border、width、height值，表單按鈕總是要比a連結按鈕矮一點呢？

 

我們知道在css3中有一個box-sizing的屬性，它就是用來解決此問題的。通過它可以修改該元素盒模型的解析方式。

box-sizing的值：1、 content-box（預設）     2、border-box（IE5.5的盒模型）       3、Inherit 繼承父元素的盒模型解析方式

css盒模型