原來存在兩種盒模型,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 盒子模...