原來存在兩種盒模型，w3c標準盒模型和ie盒模型。兩者盒模型下計算元素的寬高不一致，為了實現統一，採取的方法是避免觸發ie盒模型，使用宣告就可以避免。
下面我們來看看兩者的區別。
w3c標準盒模型 width=(margin-left)+(margin-right)+(padding-left)+(padding-right)+(border-left)+border-right+content;(content不包含其他部分)
height類似。
ie盒模型 width=(margin-left)+(margin-right)+content;(content包含border,padding);
height類似。
例：乙個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，如果用標準 w3c 盒子模型解釋，那麼這個盒子需要佔據的位置為：寬 20*2+1*2+10*2+200=262px
、高 20*2+1*2*10*2+50=112px，
盒子的實際
大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；
如果用ie 盒子模型，那麼這個
盒子需要佔據的位置為：寬 20*2+200=240px、高 20*2+50=70px，
盒子的實際大小為：寬 200px、高 50px。
css 兩種盒模型
w3c 模型 box sizing border box content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。border box 為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都...
CSS 兩種盒模型
第一種是w3c標準的盒子模型 標準盒模型 第二種ie標準的盒子模型 怪異盒模型 標準盒模型width指的是內容區域content的寬度 height指的是內容區域content的高度 w3c標準盒模型下盒子的大小 width content border padding margin 怪異盒模型中的...
CSS的兩種盒模型
關於css的盒子模型相信學習前端的同學都有所耳聞，因為它太基礎太重要了。提起盒子模型，大家可能會想到content，padding，border，margin這些詞彙，還有也許還會想起盒子模型有兩種，比如ie的盒子模型與w3c的盒子模型，那麼我們怎麼來區分呢？先來看看w3c的盒子模型 w3c 盒子模...