創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比東風(fēng)網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式東風(fēng)網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋東風(fēng)地區(qū)。費(fèi)用合理售后完善，十年實(shí)體公司更值得信賴。

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)W3C盒子模型和IE盒子模型的不同點(diǎn)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一個盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

現(xiàn)計算出兩種盒子模型下盒子的寬高。

W3C標(biāo)準(zhǔn)盒子：

盒子占用空間的寬高：（在瀏覽器頁面所占空間）

Width = 200 + 10*2 + 10*2 + 20*2 = 280 px;

Height = 50 + 10*2 + 10*2 + 20*2 = 130 px;

盒子實(shí)際寬高：

Width = 200 + 10*2 + 10*2 = 240 px;

Height = 50 + 10*2 + 10*2 = 90 px;

IE盒子：

盒子占用空間的寬高：（在瀏覽器頁面所占空間）

Width =  200 + 20*2 = 240 px;

Height = 50 + 20*2 = 90 px;

盒子實(shí)際寬高：

Width = 200 px;

Height = 50 px;

由數(shù)據(jù)可以看出，同樣的數(shù)據(jù)下，border-box是比content-box要小的。

顯示效果：

上述就是小編為大家分享的W3C盒子模型和IE盒子模型的不同點(diǎn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

分享名稱：W3C盒子模型和IE盒子模型的不同點(diǎn)-創(chuàng)新互聯(lián)
文章源于：http://weahome.cn/article/pesgj.html