W3C盒子模型和IE盒子模型的不同點(diǎn)

發(fā)布時(shí)間：2020-07-01 10:29:50 來源：億速云閱讀：197 作者：Leah 欄目：web開發(fā)

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

一個(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)

上述就是小編為大家分享的W3C盒子模型和IE盒子模型的不同點(diǎn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

猜你喜歡