這篇文章主要介紹“CSS盒子模型的種類區(qū)別有哪些”，在日常操作中，相信很多人在CSS盒子模型的種類區(qū)別有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS盒子模型的種類區(qū)別有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

站在用戶的角度思考問題，與客戶深入溝通，找到東烏珠穆沁網(wǎng)站設(shè)計與東烏珠穆沁網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗(yàn)好的作品，建站類型包括：網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國際域名空間、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋東烏珠穆沁地區(qū)。

盒子模型是css中一個重要的概念，理解了盒子模型才能更好的排版。其實(shí)盒子模型分兩種： ie盒子模型和標(biāo)準(zhǔn) w3c盒子模型。

ie盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn) w3c盒子模型不同的是：ie盒子模型的 content部分包含了 border和 pading。

例：一個盒子的 margin為 20px，border為 1px，padding為 10px，content的寬為 200px、高為 50px，

假如用標(biāo)準(zhǔn) w3c盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的實(shí)際大小為：寬 1*2+10*2+200=222px、高 1*2+10*2+50=72px；

假如用ie盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px。

盒子模型的選定：

怎么樣才算是選擇了“標(biāo)準(zhǔn) w3c盒子模型”呢？很簡單，就是在網(wǎng)頁的頂部加上 doctype聲明。假如不加 doctype聲明，那么各個瀏覽器會根據(jù)自己的行為去理解網(wǎng)頁，即 ie瀏覽器會采用 ie盒子模型去解釋你的盒子，而 ff會采用標(biāo)準(zhǔn) w3c盒子模型解釋你的盒子，所以網(wǎng)頁在不同的瀏覽器中就顯示的不一樣了。反之，假如加上了 doctype聲明，那么所有瀏覽器都會采用標(biāo)準(zhǔn) w3c盒子模型去解釋你的盒子，網(wǎng)頁就能在各個瀏覽器中顯示一致了。

PS：CSS中margin和padding的區(qū)別

在CSS中margin是指自身邊框到自身外部另一個容器邊框之間的距離，就是容器外距離；padding則是容器內(nèi)距離。

一、padding

1、語法結(jié)構(gòu)

（1）padding-left:10px;左內(nèi)邊距

（2）padding-right:10px;右內(nèi)邊距

（3）padding-top:10px;上內(nèi)邊距

（4）padding-bottom:10px;下內(nèi)邊距

（5）padding：10px;四邊統(tǒng)一內(nèi)邊距

（6）padding:10px 20px;上下、左右內(nèi)邊距

（7）padding:10px 20px 30px;上、左右、下內(nèi)邊距

（8）padding:10px 20px 30px 40px;上、右、下、左內(nèi)邊距

2、可能取的值

（1）length規(guī)定具體單位記的內(nèi)邊距長度

（2）%基于父元素的寬度的內(nèi)邊距的長度

（3）auto瀏覽器計算內(nèi)邊距

（4）inherit規(guī)定應(yīng)該從父元素繼承內(nèi)邊距

3、瀏覽器兼容問題

（1）所有瀏覽器都支持padding屬性

（2）任何版本IE都不支持屬性值“inherit”

到此，關(guān)于“CSS盒子模型的種類區(qū)別有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！