网页设计与制作项目教程项目4“青春树儿童摄影网”首页制作.ppt

例如： 运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。 清除浮动 【任务4-4】 元素的浮动 2. 清除浮动 空标记 overflow after伪对象 在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除浮动。这个空标记可以为div、p、hr /等任何标记。 “overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。 使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。 01 02 03 【任务4-4】 元素的浮动 2. overflow属性 【任务4-4】 元素的浮动 3. overflow属性可以解决溢出问题，其基本语法格式如下： 选择器{overflow:属性值;} overflow属性的常用值有四个，具体如下表所示。 属性值 描述 visible 内容不会被修剪，会呈现在元素框之外（默认值） hidden 溢出内容会被修剪，并且被修剪的内容是不可见的 auto 在需要时产生滚动条，即自适应所要显示的内容 scroll 溢出内容会被修剪，且浏览器会始终显示滚动条 浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。 【任务4-5】 元素的定位 下面，将对元素的定位进行详细讲解。 元素的定位属性 什么是定位？ 【任务4-5】 元素的定位 1. 元素的定位属性 在CSS中，通过CSS定位（CSS position）可以实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。 【任务4-5】 元素的定位 1. 元素的定位属性 选择器{position:属性值；} position属性用于定义元素的定位模式，其基本语法格式如下： position属性的常用值有四个，具体如下表所示。 值 描述 static 自动定位（默认定位方式） relative 相对定位，相对于其原文档流的位置进行定位 absolute 绝对定位，相对于其上一个已经定位的父元素进行定位 fixed 固定定位，相对于浏览器窗口进行定位 定位模式 【任务4-5】 元素的定位 1. 元素的定位属性 边偏移 通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如下表所示。 边偏移属性 描述 top 顶端偏移量，定义元素相对于其父元素上边线的距离 bottom 底部偏移量，定义元素相对于其父元素下边线的距离 left 左侧偏移量，定义元素相对于其父元素左边线的距离 Right 右侧偏移量，定义元素相对于其父元素右边线的距离 【任务4-5】 元素的定位 1. 静态定位static 静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。 【任务4-5】 元素的定位 2. 相对定位relative 相对定位是将元素相对于它在标准文档流中的位置进行定位。 定位前 定位后 【任务4-5】 元素的定位 3. 相对定位relative 距离左边150px 距离上图100px 在文档流中的位置仍然保留着 【任务4-5】 元素的定位 3. 绝对定位absolute 绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。 定位前 定位后 【任务4-5】 元素的定位 4. 绝对定位absolute 距离左边150px 距离顶部100px 在文档流中的位置没被保存 【任务4-5】 元素的定位 4. 固定定位fixed 固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position