溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

CSS盒模型BoxModel的用法介紹

發(fā)布時(shí)間：2021-06-18 13:57:45 來源：億速云 閱讀：148 作者：chen 欄目：web開發(fā)

這篇文章主要講解了“CSS盒模型BoxModel的用法介紹”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“CSS盒模型BoxModel的用法介紹”吧！

這里向大家描述一下CSS盒模型（BoxModel）的用法，由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當(dāng)box為float時(shí)，IE6中box左右的margin會加倍。

CSS盒模型（BoxModel）詳解

width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。但是由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會有些不同。左右Margin加倍的問題當(dāng)box為float時(shí)，IE6中box左右的margin會加倍。

W3C定義的盒模式如下：

CSS盒模型BoxModel的用法介紹

width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會填充padding和content部分。
但是由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會有些不同。

左右Margin加倍的問題

當(dāng)box為float時(shí)，IE6中box左右的margin會加倍。比如：

ExampleSourceCode

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>www.52css.com</title> <style> .outer{  width:500px;  height:200px;  background:#000;  }  .inner{  float:left;  width:200px;  height:100px;  margin:5px;  background:#fff;  }  </style> </head> <body> <divclassdivclass="outer"> <divclassdivclass="inner"></div> <divclassdivclass="inner"></div> </div> </body> </html>

左面的inner的左面margin明顯大于5px。
這時(shí)候，定義inner的display屬性為inline。

外層box自動計(jì)算高度的問題

根據(jù)W3C定義，沒有float屬性的外層box不會自動計(jì)算高度，要計(jì)算高度，必須在內(nèi)層***一個(gè)box加入clear:both。
Opera、netscape、mozilla等不會計(jì)算外層box高度，但是微軟ie6會自動計(jì)算外層高度。比如：

ExampleSourceCode

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <title>www.52css.com</title> <style> .outer{  width:600px;  background:#000;  }  .inner1{  float:left;  width:200px;  height:100px;  margin:5px;  background:red;  }  .inner2{  float:left;  width:200px;  height:100px;  margin:5px;  background:yellow;  }  </style> </head> <body> <divclassdivclass="outer"> <divclassdivclass="inner1"></div> <divclassdivclass="inner2"></div> </div> </body> </html>

居中問題

需要定義元素的寬，并且定義橫向的margin，如果你的布局包含在一個(gè)層(容器)中，就象這樣：
你可以這樣定義使它橫向居中：

ExampleSourceCode

#wrap{  width:760px;/*修改為你的層的寬度*/  margin:0auto;  }

但是IE5/Win不能正確顯示這個(gè)定義，我們采用一個(gè)非常有用的技巧來解決：在外層用text-align屬性。就象這樣：

ExampleSourceCode

#outer{  text-align:center;  }  #wrap{  width:760px;/*修改為你的層的寬度*/  margin:0auto;  text-align:left;  }

***個(gè)#outer的text-align:center;規(guī)則定義IE5/Win中#outer的所有元素居中(其他瀏覽器只是將文字居中)，第二個(gè)text-align:left;是將#warp中的文字居左。

因此，在有居中元素的css中，外層css要定義text-align:center屬性，內(nèi)層居中用margin:xautoxauto定義，并重新定義text-align。

感謝各位的閱讀，以上就是“CSS盒模型BoxModel的用法介紹”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對CSS盒模型BoxModel的用法介紹這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手