CSS盒子模型PPT课件.ppt

第4章CSS盒子模型 盒子 与 模型 的概念探究边框设置内边距设置外边距盒子之间的关系盒子在标准流中的定位原则 1 第4章CSS盒子模型 盒子模型是CSS控制页面时一个很重要的概念 只有很好地掌握了盒子模型以及其中每个元素的用法 才能真正地控制好页面中的各个元素 所有页面中的元素都可以看成是一个盒子 占据着一定的页面空间 一般来说这些被占据的空间往往都要比单纯的内容大 换句话说 可以通过调整盒子的边框和距离等参数 来调节盒子的位置和大小 2 第4章CSS盒子模型 一个页面由很多这样的盒子组成 这些盒子之间会互相影响 因此掌握盒子模型需要从两方面来理解 一是理解一个孤立的盒子的内部结构 二是理解多个盒子之间的相互关系 3 4 1 盒子 与 模型 的概念探究 图4 1画框示意图 4 图4 2盒子模型 5 4 2边框 4 2 1边框的三个属性border width border color border style 4 2 2属性值的简写形式CSS中可以用简单的方式确定边框的属性值 6 1 在一行中同时设置边框的宽度 颜色和样式 要把border width border color和border style这3个属性合在一起 还可以用border属性来简写 border 2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线 这样就比分为3条样式来写更方便 7 2 对不同的边框设置不同的属性值 使用CSS时 可以分别对4条边框设置不同的属性值 方法是按照顺序 给出2个 3个或者4个属性值 其含义如下 给出2个属性值 前者表示上下边框的属性 后者表示左右边框的属性 border style dashsolid给出3个属性值 前者表示上边框的属性 中间的数值表示左右边框的属性 后者表示下边框的属性 border width 1px3px2px给出4个属性值 那么依次表示上 右 下 左边框的属性 即顺时针排序 border color redgrayorangeblue 8 3 对一条边框设置与其他边框不同的属性 在CSS中 可以单独对某一条边框在一条CSS规则中设置属性 例如 border 2pxgreendashed border left 1pxredsolid 9 4 同时制定一条边框的一种属性 有时 还需要对某一条边框的某一个属性进行设置 例如仅希望设置左边框的颜色为红色 可以写作 border left color red 10 5 实例4 02 html outerBox width 200px height 100px border 2pxblacksolid border left 4pxgreendashed border color redgrayorangeblue 上右下左 border right color purple 11 4 3设置内边距 和边框类似 padding属性可以设置1 2 3或4个属性值 分别如下 1个属性值 表示上下左右4个padding均为该值 2个属性值 前者为上下的值 后者为左右的值 3个属性值 第1个为上的值 第2个为左右的值 第3个为下的值 4个属性值 按照顺时针方向 依次为上 右 下 左padding的值 12 4 3设置内边距 如果需要专门设置某一个方向的padding 可以使用padding left padding right padding top或者padding bottom来设置 例 4 04 html 13 4 4设置外边距 外边距 margin 指的是盒子与盒子之间的距离 14 4 5盒子之间的关系 图4 14打开新窗口 教务处学生处理学院文学院 4 5 1HTML与DOM树 15 DOM树与页面布局的对应关系 图4 15DOM树与页面布局的对应关系 16 4 5 2标准文档流 标准文档流 NormalDocumentStream 简称 标准流 是指在不使用其他与排列和定位相关的特殊CSS规则时 各种元素的排列规则 17 1 块级元素 blocklevel li占据着一个矩形的区域 并且和相邻的li依次竖直排列 不会排在同一行中 ul也具有同样的性质 占据着一个矩形的区域 并且和相邻的ul依次竖直排列 不会排在同一行中 因此 这类元素称为 块级元素 blocklevel 即它们总是以一个块的形式表现出来 并且跟同级的兄弟块依次竖直排列 左右撑满 18 2 行内元素 inline 对于文字这类元素 各个字母之间横向排列 到最右端自动折行 这就是另一种元素 称为 行内元素 inline 比如标记 就是一个典型的行内元素 这个标记本身不占有独立的区域 仅仅是在其他元素的基础上指出了一定的范围 再比如 最常用的标记 也是一个行内元素 19 4 5 3标记与标记 1 是一个区块容器标记 即与之间相当于一个容器 可以容纳段落 标题 表格 图片等各种HTML元素 可以把与中的内容视为一个独立的对象 用于CSS的控制 声明时只需要对进行相应的控制 其中的各标记元素都会因此而改变 20 4 5 3标记与标记 2 标记与标记一样 作为容器标记而被广泛应用在HTML语言中 在与中间同样可以容纳各种HTML元素 从而形成独立的对象 可以说与这两个标记起到的作用都是独立出各个区块 在这个意义上二者没有太多的不同 21 4 5 3标记与标记 3 与的区别是一个块级元素 它包围的元素会自动换行 而仅仅是一个行内元素 在它的前后不会换行 没有结构上的意义 纯粹是应用样式 当其他行内元素都不合适时 就可以使用元素 22 4 5 3标记与标记 实例文件为 4 06 html div标记范例div font size 18px font weight bold font family Arial color FFFF00 background color 0000FF text align center width 300px height 100px 这是一个div标记 23 4 5 3标记与标记 实例文件为 13 07 html div与span的区别div标记不同行 span标记同一行 24 4 5 3标记与标记 图4 17与标记的区别 25 4 6盒子在标准流中的定位原则 4 6 1行内元素之间的水平margin 图4 18行内元素之间的margin 26 4 6 2块级元素之间的竖直margin 竖直排列的块级元素 margin的取值情况就会有所不同 两个块级元素之间的距离不是margin bottom与margin top的总和 而是两者中的较大者 27 4 6 2块级元素之间的竖直margin 这个现象称为margin的 塌陷 或称为 合并 现象 意思是说较小的margin塌陷 合并 到了较大的margin中 28 4 6 3嵌套盒子之间的margin 当一个块包含在另一个块中时 便形成了典型的父子关系 其中子块的margin将以父块的内容为参考 29 4 7 4margin属性可以设置为负值 当margin设为负数时 会使被设为负数的块向相反的方向移动 甚至覆盖在另外的块上 30 第5章盒子的浮动与定位 盒子的浮动盒子的定位盒子的display属性 31 第5章盒子的浮动与定位 上一章介绍了独立的盒子模型 以及在标准流情况下的盒子的相互关系 如果仅仅按照标准流的方式进行排版 就只能按照仅有的几种可能性进行排版 限制太大 CSS的制定者又给出了若干不同的手段以实现各种排版需要 从而可以灵活地实现各种形式的排版要求 本章介绍CSS中float和position这两个重要属性的应用 32 5 1盒子的浮动 在标准流中 一个块级元素在水平方向会自动伸展 直到包含它的元素的边界 而在竖直方向和兄弟元素依次排列 不能并排 使用 浮动 方式后 块级元素的表现就会有所不同 33 5 1盒子的浮动 CSS中有一个float属性 默认为none 也就是标准流通常的情况 如果将float属性的值设置为left或right 元素就会向其父元素的左侧或右侧靠紧 同时默认情况下 盒子的宽度不再伸展 而是收缩 根据盒子里面的内容的宽度来确定 34 2020 2 7 35 1 实验的基础页面 float属性body margin 15px font family Arial font size 12px father background color ffff99 border 1pxsolid 111111 padding 5px fatherdiv padding 10px margin 15px border 1pxdashed 111111 background color 90baff fatherp border 1pxdashed 111111 background color ff90ba 36 1 实验的基础页面 son1 这里设置son1的浮动方式 son2 这里设置son1的浮动方式 son3 这里设置son1的浮动方式 Box 1Box 2Box 3这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 这里是浮动框外围的文字 37 2 第1个div向左浮动 son1 float left 38 3 第2个div也向左浮动 son2 float left 39 4 第3个div也向左浮动 son3 float left 40 5 改变浮动方向 第3个向右浮动 son3 float right 41 图 div被挤到下一行时的效果 浏览器变窄后 42 6 再次改变浮动的方向 2右3左 图 交换div位置时的效果 son1 son3 float left son2 float right 43 图 div被挤到下一行的效果 浏览器变窄后 44 7 全部向左浮动 图 设置3个div浮动时的效果 45 图 div挤倒下一行被卡住时的效果 浏览器变窄后 46 8 使用clear属性清除浮动的影响 图 设置浮动后文字环绕的效果 47 清除浮动对左侧影响 fatherp border 1pxdashed 111111 background color ff90ba clear left 48 清除浮动对右侧影响 fatherp border 1pxdashed 111111 background color ff90ba clear right 49 5 2盒子的定位 position属性 position属性可以设置为以下4个属性值之一 1 static 这是默认的属性值 也就是该盒子按照标准流 包括浮动方式 进行布局 50 2 relative 称为相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础 然后使盒子相对于它在原本的标准位置偏移指定的距离 相对定位的盒子仍在标准流中 它后面的盒子仍以标准流方式对待它 51 3 absolute 绝对定位 盒子的位置以它的包含框为基准进行偏移 绝对定位的盒子从标准流中脱离 这意味着它们对其后的兄弟盒子的定位没有影响 其他的盒子就好像这个盒子不存在一样 包含框 已定位的祖先框 4 fixed 称为固定定位 它和绝对定位类似 只是以浏览器窗口为基准进行定位 52 1 静态定位 图 没有设置position属性时的状态 53 2 相对定位 1 一个子块的情况 block1 background color fff0ac border 1pxdashed 000000 padding 10px position relative relative相对定位 left 30px top 30px Box 1 54 图 一个div设置为相对定定位后的效果 55 图 以右侧和下侧为基准设置相对定定位 position relative bottom 30px right 30px 56 2 两个子块的情况 图5 19设置为相对定位前的效果 57 图5 20两个兄弟div的情况下 其中一个设置为相对定位后的效果 58 3 结论 得出下面两条关于 相对定位 的定位原则 1 使用相对定位的盒子 会相对于它在原本的位置 通过偏移指定的距离 到达新的位置 2 使用相对定位的盒子仍在标准流中 它对父块和兄弟盒子没有任何影响 59 图 两个兄弟div都设置为相对定位后的效果 60 图 在浮动方式下 使用相对定位 61 3 绝对定位 介绍了相对定位以后 下面介绍绝对定位 absolute 通过上述讲解 可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位 而其中核心的问题就是以什么作为偏移的基准 62 实验的基础页面 absolute属性body margin 20px font family Arial font size 12px father background color a0c8ff border 1pxdashed 000000 padding 15px fatherdiv background color fff0ac border 1pxdashed 000000 padding 10px block2 Box 1Box 2Box 3 63 图 设置绝对定位前的效果 64 将中间的div设置为绝对定位 图 将中间的div设置为绝对定位后的效果 block2 position absolute top 0px right 0px 65 将父块设置为 包含块 图