《网页设计》课件——4-3元素的浮动与定位.pptxVIP

元素的浮动与定位

目录◎元素的类型与转换◎浮动属性float◎清除浮动属性clear◎元素的定位◎overflow溢出属性

1元素的类型与转换1.元素的类型HTML用于布局网页页面的元素主要分为块级元素、行内元素和行内块级元素。(1)块级元素（block）块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域。特点：默认情况下，块状元素都会占据一行，通俗地说，两个相邻块状元素不会出现并列显示的现象；默认情况下，块状元素会按顺序自上而下排列。块状元素都可以定义自己的宽度和高度，还可以设置行高、边距等。元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。常见的块元素有div、dl、dt、dd、ol、ul、fieldset、h1~h6、p、form、iframe、colgroup、table、tr、td等，其中div标签是最典型的块级元素，被广泛的应用到了页面布局中。

1.元素的类型(2)行内元素（inline）内元素也称内联元素，是始终一在行内逐个进行显示，常用于控制页面中文本的样式。特点：和其他元素都在一行上。元素的高度、宽度、行高及顶部和底部边距不可设置。元素的宽度就是它包含的文字或图片的宽度，不可改变。常见的行内元素有a、samp、strong、b、em、i、del、s、ins、u、span等。其中span标记是最典型的行内元素。span与/span之间只能包含文本和各种文本的修饰标签，如加粗标记strong、倾斜标记em等，span中还可以嵌套多层span。

1.元素的类型(3)行内块级元素（inline-block）行内块级元素就是同时具备行内元素、块级元素的特点。本质仍是行内元素，但是可以设置width及height属性。常见的行内块元素有img、input标签就是这种行内块级标签。举例演示【实例6-8】元素的类型使用。

元素的类型总结行内元素会在一条直线上排列，都是同一行的，水平方向排列。块级元素各占据一行，垂直方向排列。块级元素从新行开始结束接着一个断行。块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。

1元素的类型与转换2.元素的类型转换盒子模型可通过display属性来改变默认的显示类型。inline：此元素将显示为行内元素（行内元素默认的display属性值）。block：此元素将显示为块元素（块元素默认的display属性值）。nline-block：此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行（行内块级元素的display属性值）。语法：display:inline|block|inline-block|none;none：此元素将被隐藏，不显示，也不占用页面空间，相当于该元素不存在。

举例演示【实例6-9】元素类型的转换。元素默认呈现效果元素的转换效果块元素与行内元素的都转换为行内块元素的效果

2浮动属性float语法：float:none|left|right;在CSS中，通过float属性定义元素向哪个方向浮动。应用了浮动后元素会脱离标准文档流的控制，移动到其父元素中指定位置。属性值none表示元素不浮动，默认值。属性值left表示元素向左浮动属性值right表示元素向右浮动。

举例演示【实例6-10】float浮动属性的使用。不设置浮动时的页面效果设置box1的左浮动效果设置box2的左浮动效果设置box2的右浮动效果

3清除浮动属性clear语法：clear:left|right|both;在CSS中，清除浮动属性clear定义了元素的哪一侧不允许出现浮动元素。属性值left表示不允许左侧有浮动元素属性值right表示不允许右侧有浮动元素属性值both同时清除左右两侧浮动的影响。

举例演示【实例6-11】clear清除浮动属性的使用。不设置清除浮动时的页面效果清除box3元素的左浮动后的效果清除box3元素的右浮动后的效果

4元素的定位语法：position:static|relative|absolute|fixed;在CSS页面布局时，通过position属性定来设置元素的定位模式。static表示静态定位，是默认的定位方式；relative表示相对定位，相对于其原文档流的位置进行定位；absolute表示绝对定位，相对于其上一个已经定位的父元素进行定位；fixed表示固定定位，相对于浏览器窗口进行定位。在CSS中主要通过top、righ