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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、醴陵網(wǎng)絡(luò)推廣、重慶小程序開發(fā)公司、醴陵網(wǎng)絡(luò)營(yíng)銷、醴陵企業(yè)策劃、醴陵品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供醴陵建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：www.cdcxhl.com

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

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

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)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。