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

元素的浮动与定位目录◎元素的类型与转换◎浮动属性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、right、bottom和left来精确定义定位元素的位置名称含义top规定元素的顶部边缘。定义元素相对于其父元素上边线的距离right右侧偏移量，定义元素相对于其父元素右边线的距离bottom底部偏移量，定义元素相对于其父元素下边线的距离left左侧偏移量，定义元素相对于其父元素左边线的距离发生重叠时，应用z-index层叠等级属性，其取可为正整数、负整数和0。1.静态定位static静态定位static是元素的默认定位方式，各个元素遵循HTML文档流中默认的位置。所以通常都省略在代码中写出来。注意：在静态定位状态下，无法通过边偏移属性（top、right、bottom和left）来改变

元素的位置。举例演示【实例6-12】静态定位static的使用。static静态定位的页面效果2.相对定位relative相对定位表示他相对的参照物就是他在static状态下的位置，即默认的位置，通过top、right、bottom和left属性来控制他们的位置。例如

将“实例6-12”中box2的static定位模式修改为relative，CSS代码如下。#box2{background-color:#eafc8f;

position:relative;/*设置相对定位*/left:25px;top:25px;}举例演示【实例6-12-1】相对定位relative的使用。3.绝对定位absolute当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。。与relative相比，它的特点在于当对象发生位移时，原先初始位置的内容如同被去除了一样，这个对象对立与其他页面内容，而初始位置的空白被其他内容自然填补。#box2{background-color:#eafc8f;position:absolute;/*设置绝对定位*/left:25px;top:25px;}举例演示【实例6-12-2】绝对定位absolute的使用。注意：绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。当区域2的父元素section的定位方式发生变化时，区块2的位置也会发生变化。section{ border:1pxsolidred; background-color:#EEEEEE;

position:relative;/*设置相对定位*/ top:50px;/*设置距离body边框顶部边线50px*/ }4.固定定位fixed固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当页面长度超出浏览器窗口时，页面会出现滚动条，绝对定位下的元素会随着页面一起移动，而固定定位下的页面元素不会随着页面滚动，会始终显示在浏览器窗口的固定位置。例如

position:fixed;/*设置绝对定位*/bottom:0px;/*设置距离父元素左边线0px*/right:25px;/*设置距离父元素右部边线25px*/5overflow溢出属性语法：

overflow:visible|hidden|auto|scroll;在CSS中，overflow属性主要应用在当盒子内的元素超出盒子自身的大小时，内容就会溢出，如果想要规范溢出内容的显示