CSS盒模型（BoxModel）用法詳解

作者：52css 2010-09-03 11:12:48

你對(duì)CSS盒模型（BoxModel）的概念和用法是否熟悉，這里和大家分享一下，width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。

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

CSS盒模型（BoxModel）詳解

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

W3C定義的盒模式如下：

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

左右Margin加倍的問(wèn)題

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

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。#p#

外層box自動(dòng)計(jì)算高度的問(wèn)題

　　根據(jù)W3C定義，沒(méi)有float屬性的外層box不會(huì)自動(dòng)計(jì)算高度，要計(jì)算高度，必須在內(nèi)層***一個(gè)box加入clear:both。
　　Opera、netscape、mozilla等不會(huì)計(jì)算外層box高度，但是微軟ie6會(huì)自動(dòng)計(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>

居中問(wèn)題

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

ExampleSourceCode

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

　　但是IE5/Win不能正確顯示這個(gè)定義，我們采用一個(gè)非常有用的技巧來(lái)解決：在外層用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。

【編輯推薦】

IE中中CSS偽類:hover的使用及其BUG
CSS代碼結(jié)構(gòu)div和span初探
CSS選擇器中類型和后代選擇器使用秘笈
解析四大CSS屬性值選擇器用法
專家推薦 DIV CSS表單布局的五個(gè)小技巧

責(zé)任編輯：佚名來(lái)源： 52css.com

CSS box