CSS入门：CSS盒模型
时间：2007-09-03 来源：linxh
本文转自： http://bbs.blueidea.com/viewthread.php?tid=2524759
原文如下：
CSS2盒模型
CSS2中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
(外补丁)margin，(背景颜色)background-color，(背景图片)background-image，(内补丁)padding ，(内容)content，(边框)border。
下图是CSS盒模型的示意图
500)this.width=500;" border=0> 平面示意图 500)this.width=500;" border=0> 3D示意图(原图出自：hicksdesign) <OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 height=420 width=560 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="14817"><PARAM NAME="_cy" VALUE="11113"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://blogimg.chinaunix.net/blog/upfile/070903085006.swf"><PARAM NAME="Src" VALUE="http://blogimg.chinaunix.net/blog/upfile/070903085006.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="NoBorder"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"> </OBJECT> Flash示意模型 需要说明的是：
IE5.x 和 IE 6.0在quirks模式下使用自己的错误的和模型解释，box的宽度等于width的值，比如你定义一个div
div{width:90px; padding:10px;margin:10px;border:10px;}
正常的div的宽度应该为90px+10px*2+10px*2+10px*2=150px
而他们认为是90px+10px*2=110px。width的值90px包含了padding,border的值
解决这个问题的方法：
#content {
width:90px;
voice-family: "\"}\"";
voice-family:inherit;
width:130px; /* For IE 5.x/Win */
}
html>body #content {
width:90pxpx;
}
#content {
width:90px !important;/* For all */
width /**/:130px;/* for IE 5.x/win */
}
html>body #content {
width:90px;
}
而支持标准的浏览器正常的解析了盒模型,认为宽度是120px,比如现在的 Firefox 1.0+ Opera 7.0+ IE6.0的标准模式。
CSS2中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
(外补丁)margin，(背景颜色)background-color，(背景图片)background-image，(内补丁)padding ，(内容)content，(边框)border。
下图是CSS盒模型的示意图
500)this.width=500;" border=0> 平面示意图 500)this.width=500;" border=0> 3D示意图(原图出自：hicksdesign) <OBJECT codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 height=420 width=560 classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000><PARAM NAME="_cx" VALUE="14817"><PARAM NAME="_cy" VALUE="11113"><PARAM NAME="FlashVars" VALUE=""><PARAM NAME="Movie" VALUE="http://blogimg.chinaunix.net/blog/upfile/070903085006.swf"><PARAM NAME="Src" VALUE="http://blogimg.chinaunix.net/blog/upfile/070903085006.swf"><PARAM NAME="WMode" VALUE="Transparent"><PARAM NAME="Play" VALUE="-1"><PARAM NAME="Loop" VALUE="-1"><PARAM NAME="Quality" VALUE="High"><PARAM NAME="SAlign" VALUE=""><PARAM NAME="Menu" VALUE="-1"><PARAM NAME="Base" VALUE=""><PARAM NAME="AllowScriptAccess" VALUE=""><PARAM NAME="Scale" VALUE="NoBorder"><PARAM NAME="DeviceFont" VALUE="0"><PARAM NAME="EmbedMovie" VALUE="0"><PARAM NAME="BGColor" VALUE=""><PARAM NAME="SWRemote" VALUE=""><PARAM NAME="MovieData" VALUE=""><PARAM NAME="SeamlessTabbing" VALUE="1"><PARAM NAME="Profile" VALUE="0"><PARAM NAME="ProfileAddress" VALUE=""><PARAM NAME="ProfilePort" VALUE="0"><PARAM NAME="AllowNetworking" VALUE="all"><PARAM NAME="AllowFullScreen" VALUE="false"> </OBJECT> Flash示意模型 需要说明的是：
IE5.x 和 IE 6.0在quirks模式下使用自己的错误的和模型解释，box的宽度等于width的值，比如你定义一个div
div{width:90px; padding:10px;margin:10px;border:10px;}
正常的div的宽度应该为90px+10px*2+10px*2+10px*2=150px
而他们认为是90px+10px*2=110px。width的值90px包含了padding,border的值
解决这个问题的方法：
#content {
width:90px;
voice-family: "\"}\"";
voice-family:inherit;
width:130px; /* For IE 5.x/Win */
}
html>body #content {
width:90pxpx;
}
#content {
width:90px !important;/* For all */
width /**/:130px;/* for IE 5.x/win */
}
html>body #content {
width:90px;
}
而支持标准的浏览器正常的解析了盒模型,认为宽度是120px,比如现在的 Firefox 1.0+ Opera 7.0+ IE6.0的标准模式。
相关阅读 更多 +
