CSS2盒模型的3D示意图

CSS2中的盒模型是关系到我们排版定位的关键，例如<div>就遵循盒模 型规范。盒模型定义的margin，background-color，background-image，padding ，content，border，初学者经常会搞不清楚它们之间的层次、关系和相互影响。 这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。

原图出自：hicksdesign

需要说明的是：IE和Mozilla浏览器对盒模型的解释不一致，造成我们定位上的困难，主要差别是：

• IE计算2个div之间的距离时候，会把1px的border计算在内，而mozilla没有 ；
• 设定div的宽度后，如果给padding加一个值，IE会在宽度内减去这个值，而M ozilla会在宽度基础上加上这个值。

• · CSS高级进阶应用技巧
• · 巧用CSS的无参数滤镜
• · 巧用CSS的无参数滤镜
• · 巧用CSS的RevealTrans滤镜
• · 巧用CSS的BlendTrans滤镜标题
• · 巧用CSS的Wave滤镜
• · 巧用CSS的Glow滤镜
• · 巧用CSS的alpha滤镜
• · 巧用CSS的Dropshadow滤镜
• · 巧用CSS的Blur滤镜
• · 巧用CSS的Mask滤镜
• · CSS定位
• · 网页特效大公开
• · DIV下拉式菜单（一）
• · DHTML幻灯片播放程序（一）
• · DHTML幻灯片播放程序（三）
• · DHTML幻灯片播放程序（二）
• · 为主页添加一个漂亮的按钮（下）
• · 为主页添加一个漂亮的按钮（上）
• · 声音层叠样式表单
• · 禁止背景图在网页中平铺
• · 自定多姿多彩的网页链接下划线
• · 巧用CSS的Light滤镜
• · CSS 速查手册
• · cSS控制背景
• · CSS 文字定位
• · 巧用CSS制作文字变图象特效
• · CSS鼠标属性
• · CSS分级属性
• · CSS分级属性
• · CSS容器属性
• · CSS颜色和背景属性
• · CSS+VBScript制作的酷酷光照效果
• · 带你了解样式表滤镜
• · 主页的秘密
• · CSS的宣告
• · CSS有关条列项目的设定
• · CSS定位：z-index