16 十 2 现场演示: ■案例12-05:清除浮动 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 16 现场演示： 案例12-05：清除浮动
1定位与布局的基本属性 14定位布局 口定位坐标值 为了灵活的定位页面元素,CSS定义了4个坐标属性:top、 right、 bottom和left。通过这些属性的联合使用,可包含块的4个内顶角 来定位元素在页面中的位置。 口top属性表示定位元素顶边外壁到包含块元素顶部内壁的距离。 口 right属性表示定位元素右边外壁到包含块元素右侧内壁的距离。 口left属性表示定位元素左边外壁到包含块元素左侧内壁的距离。 口 bottom属性表示定位元素底边外壁到包含块元素底部内壁的距离 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 定位坐标值 为了灵活的定位页面元素，CSS定义了4个坐标属性：top、right、 bottom和left。通过这些属性的联合使用，可包含块的4个内顶角 来定位元素在页面中的位置。 top属性表示定位元素顶边外壁到包含块元素顶部内壁的距离。 right属性表示定位元素右边外壁到包含块元素右侧内壁的距离。 left属性表示定位元素左边外壁到包含块元素左侧内壁的距离。 bottom属性表示定位元素底边外壁到包含块元素底部内壁的距离。 17 1.4定位布局
18 1定位与布局的基本属性 14定位布局 口 position position属性用于确定元素的位置,该属性可将图片放置到任何位 置,也可以使导航始终显示于页面最上方。CSS的定位核心正是基 于这个属性实现的。属性值有五种情况。 static a static为 position的默认属性值,没有定位,元素出现在正常流中 (忽略top, bottom,left, right或者z- index声明)。 口任何元素在默认的状态下都会以静态定位来确定自己的位置,所以 没有定义 position时,并不说明该元素没有自己的位置,它会遵循默 认值显示为静态位置。在静态位置下,开发人员无法通过坐标值(top、 bottom、1eft和 right)来改变它的位置。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 position position属性用于确定元素的位置，该属性可将图片放置到任何位 置，也可以使导航始终显示于页面最上方。CSS的定位核心正是基 于这个属性实现的。属性值有五种情况。 static static为position的默认属性值，没有定位，元素出现在正常流中 （忽略 top, bottom, left, right 或者 z-index 声明）。 任何元素在默认的状态下都会以静态定位来确定自己的位置，所以当 没有定义position时，并不说明该元素没有自己的位置，它会遵循默 认值显示为静态位置。在静态位置下，开发人员无法通过坐标值（top、 bottom、left和right）来改变它的位置。 18 1.4定位布局
19 1定位与布局的基本属性 14定位布局 口 position absolute 口 absolute可用于生成绝对定位的元素,相对于 static定位以外的第 个父元素进行定位。元素的位置通过left、top、righ、 bottom属性 进行设置。 口当 position属性取值为 absolute时,程序就会把元素从文档流中拖出 来,根据某个参照物坐标来确定显示位置。绝对定位是网页精准定位 的基本方法。如果结合left、 right、top、 bottom坐标属性进行精确 定位,结合z- index属性排列元素覆盖顺序,同时通过clip和 visiblity属性裁切、显示或隐藏元素对象或部分区域,就可以设计出 丰富多样的网页布局效果。 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 1.定位与布局的基本属性 position absolute absolute可用于生成绝对定位的元素，相对于static定位以外的第一 个父元素进行定位。元素的位置通过left、top、right、bottom属性 进行设置。 当position属性取值为absolute时，程序就会把元素从文档流中拖出 来，根据某个参照物坐标来确定显示位置。绝对定位是网页精准定位 的基本方法。如果结合left、right、top、bottom坐标属性进行精确 定位，结合z-index属性排列元素覆盖顺序，同时通过clip和 visiblity属性裁切、显示或隐藏元素对象或部分区域，就可以设计出 丰富多样的网页布局效果。 19 1.4定位布局
20 十 2 现场演示: ■案例12-06:绝对定位 河南中医学院/阮晓龙713938213680/http://web.51xueweb.cn
河南中医学院 / 阮晓龙 / 13938213680 / http://web.51xueweb.cn 20 现场演示： 案例12-06：绝对定位