CSS盒模型（BoxModel）用法詳解
這里向大家描述一下CSS盒模型（BoxModel）的用法，由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會(huì)有些不同。左右Margin加倍的問題當(dāng)box為float時(shí)，IE6中box左右的margin會(huì)加倍。
CSS盒模型（BoxModel）詳解
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會(huì)填充padding和content部分。但是由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會(huì)有些不同。左右Margin加倍的問題當(dāng)box為float時(shí)，IE6中box左右的margin會(huì)加倍。
W3C定義的盒模式如下：
width和height定義的是Content部分的寬度和高度，paddingbordermargin的寬度依次加在外面。背景會(huì)填充padding和content部分。
但是由于瀏覽器設(shè)計(jì)上的問題，不同瀏覽器顯示效果會(huì)有些不同。
左右Margin加倍的問題
當(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ì)算高度的問題
根據(jù)W3C定義，沒有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>
居中問題
需要定義元素的寬，并且定義橫向的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。
【編輯推薦】
- IE中中CSS偽類:hover的使用及其BUG
- CSS代碼結(jié)構(gòu)div和span初探
- CSS選擇器中類型和后代選擇器使用秘笈
- 解析四大CSS屬性值選擇器用法
- 專家推薦 DIV CSS表單布局的五個(gè)小技巧
