信息工程学院
标签的浮动属性
由于浮动元素不再占用原文档流中的位置，所 以会对页面中其他元素的排版产生影响，如果 要避免这种影响，就需要对元素清除浮动。
6.1 知识点讲解
信息工程学院
2、清除浮动
为了避免左浮动或右浮动对元素的影响，往往需要在该元素中清除 浮动。在CSS中，clear属性用于清除浮动，其基本语法格式如下：
选择器{clear:属性值;}
6.1 知识点讲解
信息工程学院
2、清除浮动
clear属性的常用值有三个，分别表示不同的含义，具体如下表所示。
属性值 left right both
描述 不允许左侧有浮动元素（清除左侧浮动的影响） 不允许右侧有浮动元素（清除右侧浮动的影响） 同时清除左右两侧浮动的影响
6.1 知识点讲解
网页制作基础
第六章 浮动与定位
✎
✎ 学习目标
掌握标签的
1 能够为标签
浮动
信息工程学院
性，能
型定位 2
的差别
掌握
掌握div+css的布局技巧，
能够运用div+css为 网页布局
3
目录
元素的浮动 overflow属性 元素的定位 元素的类型与转换 案例--制作网页焦点图
信息工程学院
✎
网页布局
在网页设计中，如果按照从上到下的默认 方式进行排版，网页版面看起来会显得单 调、混乱。这时就可以运用div+css对页 面进行布局，将各部分模块有序排列，使 网页的排版变得丰富、美观。
✎
网页布局常用属性
信息工程学院
应用排列
图文排列 论坛分享
在使用div+css进行网页布局时，经常会使 用一些属性对标签进行控制，常见的属性有 浮动属性（float属性）和定位属性 （position属性）、display属性。
6.1 元素的浮动
信息工程学院
元素的浮动属性float 清除浮动
✎
6.1 知识点讲解
6.1 知识点讲解
信息工程学院
2、清除浮动
（3）使用after伪对象清除浮动
使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器 和其他非IE浏览器。使用after伪对象清除浮动时需要注意以下两点：
（1）必须为需要清除浮动的元素伪对象设置“height:0;”样式，否则该元素 比其会实际高度高出若干像素。
scroll 溢出内容会被修剪，且浏览器会始终显示滚动条
6.3 元素的定位
信息工程学院
元素的定位属性 静态定位static 相对定位relative 绝对定位absolute 固定定位fixed z-index层叠等级属性
✎
6.3 知识点讲解
标签的定位属性
浮动布局虽然灵活，但是却 无法对元素的位置进行精确 的控制。在CSS中，通过定 位属性可以实现网页中元素 的精确定位。
主流屏幕分辨率
页面尺寸： 1200~1920像素 版心尺寸： 1000~1200像素
页面尺寸和版心
【结论】
“版心”是指网页中主 体内容所在的区域，一 般在浏览器窗口中水平 居中显示。
✎
网页布局
2、分析页面中的模块
最简单的页面布局， 主要由头部 （ header ） 、 导 航 （ nav ） 、 焦 点 图 （ banner） 、 内 容 （content）、页面 底部（footer）五部 分组成。
（2）必须在伪对象中设置content属性，属性值可以为空，如“content: "";”。
6.2 overflow属性
信息工程学院
overflow属性
6.2 知识点讲解
信息工程学院
1、overflow属性
当盒子内的元素超出盒子自身的大小时，内容就会溢出，这时如果想要规范 溢出内容的显示方式，就需要使用CSS中的overflow属性，其基本语法格式如下：
✎
6.3 知识点讲解
6、z-index层叠等级属性
当对多个元素同时 设置定位时，定位 元素之间有可能会 发生重叠，如右图 所示。
定位导致重叠
信息工程学院
z-index可以调整重 叠定位元素的堆叠 顺序，其取值可为 正整数、负整数和0。 z-index的默认值是 0。
解决重叠问题
6.3 知识点讲解 6、z-index层叠等级属性
信息工程学院
✎
6.3 知识点讲解
位属性
信息工程学院
在CSS中，通过CSS定位（CSS position）可以实现网页元素的精 确定位。元素的定位属性主要包括 定位模式和边偏移两部分。
6.3 知识点讲解
信息工程学院
1、元素的定位属性
（1）定位模式 在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下： 选择器{position:属性值;} position属性的常用值有四个，分别表示不同的定位模式，具体如下表所示。
任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义 position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。 在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的 位置。
6.3 知识点讲解
信息工程学院
3、相对定位relative
✎
6.4 知识点讲解
1、元素的类型
信息工程学院
块元素
➢ 在页面中以区域块的形式出现。 ➢ 每个块元素通常都会独自占据一整行或多整行。 ➢ 可以对其设置宽度、高度、对齐等属性。
行内元素
➢ 不占有独立的区域。 ➢ 仅仅靠自身的字体大小和图像尺寸来支撑结构。 ➢ 一般不可以设置宽度、高度、对齐等属性。
✎
定位前
定位后
✎
6.3 知识点讲解
标签的定位属性
距 离 顶 部
在文档流中的 位置没被保存
距离左边150px
信息工程学院
6.3 知识点讲解
信息工程学院
5、固定定位fixed
固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义 网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为 固定 定位。 当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器 窗口来定义自己的显示位置。不管浏览器滚动条如何滚动，也不管浏览器 窗口 的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
6.1 知识点讲解
信息工程学院
2、清除浮动
（1）使用空标记清除浮动
在浮动元素之后添加空标记，并对该标记应用“clear:both”样 可清式除，元素浮动所产生的影响，这个空标记可以为<div>、<p>、<hr /> 等任何标记。
6.1 知识点讲解
信息工程学院
2、清除浮动
（2）运用overflow属性清除浮动 运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页 时，经常会遇到一些特殊的浮动影响，例如，对子元素设置浮动 时，如 果不对其父元素定义高度，则子元素的浮动会对父元素产生影响。
6.4 知识点讲解
1、元素的类型
信息工程学院
常见的块元素
<h1>—<h6> <li>
<p>
<div> <ul> <ol>
其中<div>标签是最典型的块元素。
✎
6.4 知识点讲解
1、元素的类型
信息工程学院
常见的行内元素
<strong> <u>
<a>
<b> <em> <span>
其中<span>标签最典型的行内元素。
相对定位是将元素相对于它在标准文档流中的位置进行定位，当position属 性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位 后，可 以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。
定位前
定位后
✎
6.3 知识点讲解
标签的定位属性
在
文
档
流 中 的 位 置
距 离 上 图
选择器{overflow:属性值;}
6.2 知识点讲解
信息工程学院
1、overflow属性
overflow属性的常用值有四个，分别表示不同的含义，具体如下表所示。
属性值
描述
visible 内容不会被修剪，会呈现在元素框之外（默认值）
hidden 溢出内容会被修剪，并且被修剪的内容是不可见的
auto 在需要时产生滚动条，即自适应所要显示的内容
信息工程学院
头部（header） 导航（nav） 焦点图（banner）
内容（content） 版权（footer）
✎
网页布局
3、控制网页的各个模块
信息工程学院
当分析完页面模块后，就可以运用盒子模型的原理，通过 div+css布局来控制网页的各个模块。制作网页时，一定要 养成分析页面布局的习惯，这样可以提高网页制作的效率。
信息工程学院
✎
网页布局
信息工程学院
例如： 阅读报纸时会发现，虽然报纸中的内容很多，但 是经过合理地排版，版面依然清晰、易读。
【结论】
在制作网页时，要想使页面结构清晰、有条理，也需要对网页 进行“排版”。
✎
网页布局
1、确定版心
什么是版心？以某教育网站首页为例：
信息工程学院
1024×768像素 1366×768像素 1440×900像素 1920×1080像素
6.1 知识点讲解