当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS2盒模型的3D示意图

CSS样式表
DIV和CSS排版中制作细线条的方法小结
在解决ul居中问题时想到的几点
网页编辑中CSS样式表技巧总结
一个老外弄的Clearing floats(清除浮动的方法)
常用的DIV+CSS的基本框架结构但不推荐都放一个div里
无js5款纯div+css制作的弹出菜单标准
超强推荐CSS打造经典鼠标触发显示选项
CSS网页布局入门教程5:二列宽度自适应
CSS网页布局入门教程6:左列固定,右列宽度自适应
CSS网页布局入门教程7:二列固定宽度居中
CSS网页布局入门教程9:用CSS设计网站导航——横向导航
CSS网页布局入门教程10:带当前标识的标签式横向导航
CSS网页布局入门教程11:带当前标识的标签式横向导航图片美化版
CSS网页布局入门教程12:纵向导航菜单
CSS网页布局入门教程13:下拉及多级弹出式菜单
CSS网页布局入门教程14:纵向下拉及多级弹出式菜单
解读css发展历史
让用户自己控制网页字体的大小的css书写方法
CSS注释、命名、继承性、样式排序等CSS技巧的小结
CSS标签切换代码实例教程 比较漂亮

CSS样式表 中的 CSS2盒模型的3D示意图


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-08-10   浏览: 319 ::
收藏到网摘: n/a

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

CSS2盒模型的3D示意图

原图出自:hicksdesign

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

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