簡單區分怪異盒模型以及W3C盒模型

怪異盒模型和w3c模型的主要區別：

w3c標準的盒模型中的實際width/height = content + padding + border

而怪異盒模型當中：

實際的width/height = 直接定義的width和height

在怪異盒模型中設定的padding和border，盒子的實際大小不會變，通過減少content的寬度和高度來補上所設定的padding和border

lang

="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
#div1
#div2
#a111
style
>
head
>
>
"div1"
>
div>
"a111"
>
div>
"div2"
>
div>
body
>
html
>

在**中我給兩個盒子都設定了相同的寬、高、border和padding，但是盒子出現不同大小的主要原因是因為第二個盒子的box-sizing屬性設定為了boder-box，開啟谷歌瀏覽器按下f12我們可以看到這個盒子的屬性

圖中，content的大小由原來的給定的200 * 200，現在變成了150*150，在把盒子的box-sizing設定為boder-box後，就會從原本的200*200的大小剝離50px的空間出來分配給設定padding和border（因為padding值是20，border值是5 ，兩邊都有就是（20+5）*2 = 50px）。也就是我之前所提到的實際的width/height = 直接定義的width和height

以上這個情況也就是怪異盒模型，有些地方也叫做ie盒模型。

接下來我們來看看w3c盒模型

如圖所示，在給w3c盒模型新增padding和border後，盒子的內容區content並沒有改變，依舊還是200，新增的padding和border所占用的空間往外填充，此時盒子的實際width/height = content + padding + border

如有錯誤，歡迎指正

盒模型 IE盒模型和W3C盒模型

w3c盒模型 可以看到得到的盒子寬度和高度是120 20 20 5 5 10 10 190px ie盒模型 可以看到得到的盒子寬度和高度是120 10 10 140px 其中的120 70 20 20 5 5。也就是設定的div寬度包括了內容內邊距和邊框的寬度。通過這兩對盒子進行對比可以清楚看到兩種...

IE 盒模型和W3C盒模型

在css中有兩種盒模型 box sizing屬性可以設定元素應用哪一種盒模型。瀏覽器相容性 ie8及以上 box sizing border box 以上css 會使元素的盒模型為ie盒模型。width 與 height 包括內邊距 padding 與邊框 border 不包括外邊距 margin ...

W3C盒模型與IE盒模型

ss盒子模型 網頁設計中css技術所使用的一種思維模型。css盒子模型組成 外邊距 margin 邊框 border 內邊距 padding 內容 content css盒子模型分為 標準w3c盒子模型，ie盒子模型，注意在兩種模型中寬 width 和高 height 包括屬性的不同。w3c模型中 ...