发布时间: 2007-1-24 09:25 作者: greengnn 来源: 经典论坛
CSS2中的盒模型是关系到设计中排版定位的关键，任何一个选择符都遵循盒模型规范，例如<div>、<p>、<a>……盒模型包含
margin（外补丁），background-color（背景颜色），background-image（背景图片），padding（内补丁），content（内容），border（边框）。
下图是CSS盒模型的示意图
平面示意图
3D示意图（原图出自：hicksdesign）
下面是FLASH示意模型，请点击标题展开：
Flash: 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。width的值包含了padding margin border的值
解决这个问题的方法：
| #content { width:90px; voice-family: "\"}\""; voice-family:inherit; width:120px; /* For IE 5.x/Win */ } html>body #content { width:90pxpx; } |
|
#content { html>body #content { |
而支持标准的浏览器正常的解析了盒模型，认为宽度是120px，比如现在的Firefox 1.0 + Opera 7.0 + IE6.0的标准模式。
有风的日子│官方博客│快捷面板│站点地图│联系我们 沪ICP备05026933号
Copyright © 2007 HelloWind.com Powered by SupeSite 5.0.1
我来说两句