CSS盒子模型的種類(lèi)區(qū)別有哪些

發(fā)布時(shí)間：2022-03-22 09:45:22 來(lái)源：億速云閱讀：243 作者：iii 欄目：web開(kāi)發(fā)

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

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

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

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

假如用標(biāo)準(zhǔn) w3c 盒子模型解釋?zhuān)敲催@個(gè)盒子需要占據(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 盒子模型，那么這個(gè)盒子需要占據(jù)的位置為：寬 20*2+200=240px、高 20*2+50=70px，盒子的實(shí)際大小為：寬 200px、高 50px。

盒子模型的選定：

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

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

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

一、padding

1、語(yǔ)法結(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)邊距長(zhǎng)度

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

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

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

3、瀏覽器兼容問(wèn)題

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

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

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

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

CSS盒子模型的種類(lèi)區(qū)別有哪些

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽