W3C盒子與IE盒子模型，w3c盒子ie

W3C盒子與IE盒子模型，w3c盒子ie

盒模型：

內容(content)、填充(padding)、邊界(margin)、 邊框(border)

IE的content部分把 border 和 padding計算了進去

例：一個盒子的

margin 為 20px，border 為 1px，padding 為 10px，

content 的寬為 200px、高為 50px，

標準 w3c 盒子模型：

　　佔據的位置：內容(content) + 填充(padding) + 邊框(border) + 邊界(margin)；

　　佔據的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px；

　　盒子的實際大小：內容(content) + 填充(padding) + 邊框(border)；

　　盒子的實際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

ie 盒子模型：

　　佔據的位置：內容(content)+邊界(margin)；

　　佔據的位置為：寬 20*2+200=240px、高 20*2+50=70px，

　　盒子的實際大小：內容(content)；

　　盒子的實際大小為：寬 200px、高 50px。

　　詳情：http://www.cnblogs.com/cchyao/archive/2010/07/12/1775846.html