CSS样式表2 深入理解盒子模型.ppt

CSS样式表 第六章 2 深入理解盒子模型 上 什么是 模型 本质特征的抽象布局的 模型 3 深入理解盒子模型 什么是 模型 本质特征的抽象布局的 模型 4 深入理解盒子模型 div border width 6px border color 000000 margin 20px padding 5px background color FFFFCC 5 深入理解盒子模型 属性值的简写形式方法是按照规定的顺序 给出2个 3个或者4个属性值 它们的含义将有所区别 具体含义如下 如果给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 如果给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 如果给出4个属性值 依次表示上 右 下 左边框的属性 即顺时针排序 6 深入理解盒子模型 属性值的简写形式border color redgreenborder width 1px2px3px border style dotteddashedsoliddouble 7 深入理解盒子模型 内边距 padding outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed 8 深入理解盒子模型 外边距 margin outerBox width 128px height 128px padding 20px20px10px 上左右下 padding left 10px border 10pxgraydashed body border 1pxblacksolid background cc0 9 深入理解盒子模型 下 HTML与DOM 10 深入理解盒子模型 下 标准文档流 11 深入理解盒子模型 下 标记与标记div 块级元素 block span 行内元素 inline 12 深入理解盒子模型 下 盒子在标准流中的定位原则实验1 行内元素之间的水平marginspan left margin right 30px background color a9d6ff span right margin left 40px background color eeb0b0 13 深入理解盒子模型 下 盒子在标准流中的定位原则实验2 块级元素之间的竖直margin块元素1块元素2 块元素1 块元素2 块元素1 块元素2 margin bottom 50px margin top 30px margin bottom 50px 14 深入理解盒子模型 下 盒子在标准流中的定位原则实验3 嵌套盒子之间的margin 15 深入理解盒子模型 下 第1个列表的第1个目内容第1个列表的第2个项目内容 内容更长一些 目的是演示自动折行的效果 第2个列表的第1个项目内容第2个列表的第2个项目内容 内容更长一些 目的是演示自动折行的效果 CSS中的几何题ul background ddd margin 15px15px15px15px padding 5px5px5px5px li color black background aaamargin 20px20px20px20px padding 10px0px10px10px list style none li withborder border style dashe