《网页设计与制作》第7章 .pptxVIP

《网页设计与制作》主讲人：XXX邮箱：XXXXXXXXXXX电话：XXXXXXXXXXXX

每讲一语Allofthevictory,andconqueroneselfofvictory,areinsignificant.Allthefailures,andloseyourfailure,arenegligible?.所有的胜利，与征服自己的胜利比起来，都是微不足道。所有的失败，与失去自己的失败比起来，更是微不足道

书本内容引导解读

（重点）学习目标第7章CSS网页布局一、CSS盒子模型二、CSS定位属性三、CSS布局实现

（重点）7.1CSS盒子模型7.1.1盒子模型概念7.1.2盒子模型属性7.1.3元素类型与转换

7.1.1盒子模型概念CSS盒子模型图1

7.1.1盒子模型概念CSS盒子模型图2

CSS盒子模型图37.1.1盒子模型概念

7.1.1盒子模型概念

所以说由“盒子”堆出来的网页版面7.1.1盒子模型概念

7.1.2盒子模型属性1.盒子内外边距属性

2.盒子边框属性7.1.2盒子模型属性

功能语法背景Background：颜色图片平铺方式固定方式位置背景颜色background-color:#ccc;背景图像background-image:url(image/pic.jpg)即就是背景图像的位置或者全称背景图像的重复方式background-repeat:{repeat、no-repeat、repeat-x、repeat-y}背景图像的位置background-position:top(left、center、right)、center(left、center、right)，bottom(left、center、right),用像素精确定位横向与纵向：100px200px背景图像的依附方式background-attachment:[scoll、fixed]，IE6不支持这个效果，但是可以在html和body两个元素里面控制2.盒子背景属性7.1.2盒子模型属性

我们在布局页面的时候，会将HTML标签（元素）分成两种，块状元素和内联元素。我们平时用到的div和p就是块状元素，链接标签a是内联元素，可以通过css修改元素的类型。1、块状元素：{display：block}一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度（width）和高度（height）起作用，常见块状元素为div，p，body，h1-h6等。（很霸道，能设置宽和高，独占一行）使宽高起作用，加在内联里面7.1.3元素类型与转换

2、内联元素：{display：inline}内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度（width）和高度（height）不起作用，常见内联元素有a、em、span等。（很温柔，不能设置宽和高，不影响换行）思考：如何使内联元素的高宽起作用？在a、em、span里加{display：block}使宽高不起作用，加在块状里面。7.1.3元素类型与转换

（重点）7.2CSS定位属性7.2.1元素的浮动7.2.2元素的定位7.2.3元素的溢出7.2.4元素的重叠

（重点）7.2.1元素的浮动1.浮动定位

（重点）2.清除定位7.2.1元素的浮动

（重点）7.2.2元素的定位1.边偏移属性名称属性属性值描述边偏移top数值/百分比顶端偏移量，定义标签相对于其父元素上边线的距离bottom数值/百分比底部偏移量，定义标签相对于其父元素下边线的距离left数值/百分比左侧偏移量，定义标签相对于其父元素左边线的距离right数值/百分比右侧偏移量，定义标签相对于其父元素右边线的距离2.定位模式属性名称属性值描述定位模式(position)static静态定位，默认自动定位relative相对定位，相对于文档流的位置进行定位absolute绝对定位，相对于上一个已经定位的父标签进行定位fixed固定定位，相对于浏览器窗口进行定位

（重点）7.2.2元素的定位3.元素定位效果图

（重点）7.2.3元素的溢出属性名称属性值描述溢出(overflow)visible内容超出范围不会被修剪，内容正常呈现(默认值)hidden内容超出范围会被修剪，被修剪的内容不显示auto内容超出范围时，则产生滚动条包含所有内容，但只显示盒子大小的内容scroll内容超出范围会被修剪，浏览器始终显示滚动条

（重点）7.2.4元素的重叠属性名称属性值描述重叠(z-index)autoauto也可以用0来表示(默认值)number当取值为正整数时，则在重叠的