复制内容到剪贴板
代码:
这些教程是我整理的，参考小雨css 2.0手册，hve && Star Ocean得css手册，还有网上的一些资源，关于版权，你就别找我麻烦了。 CSS2盒模型
CSS2中的盒模型是关系到设计中排版定位的关键，任何一个
选择符都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
(外补丁)margin，(背景颜色)background-color，(背景图片)background-image，(内补丁)padding ，(内容)content，(边框)border。
下图是CSS盒模型的示意图
平面示意图
3D示意图(原图出自：hicksdesign)
Flash: http://www.jluvip.com/blog/flash/box_model.swf
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的标准模式。
[
本帖最后由 blank 于 2007-6-17 10:26 编辑 ]
