w3c盒式模型/ie盒式模型

在CSS中設定元素寬度爲200px，高度爲50px；

W3C 盒式模型:

元素的寬度和高度爲盒式模型圖中的Context部分, 不包括padding, border和margin部分.

目前除了IE全部的瀏覽器都僅支持W3C盒式模型. 在W3C盒式模型中,  示例中包含紅框在內的區域內容寬度爲200+2*10+2*5=230px, 高度爲50+2*10+2*5=80px.

IE 盒式模型:

設置的寬度包括padding,border. 實際內容寬度content Width = width  - padding – border

在IE5.5及更早的版本中, 使用了此模型. 在更高的IE版本上若是因爲某些緣由讓瀏覽器運行在怪異模式下則也會使用此盒式模式.因此須要在頁面上聲明正確的DOCTYPE.