网页设计与制作项目教程项目4“青春树儿童摄影网”课件

项目4“青春树儿童摄影网”首页制作·

盒子相关属性·

元素的浮动和定位·认识盒子模型·元素的类型与转换

HTML项目4“青春树儿童摄影网”首页制作·盒子相关属性·认识盒学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果。1掌握理解掌握熟悉2理解背景属性的设置方法，能够设置背景颜色和图像

。3熟悉清除浮动的方法，可以使用不同方法清除浮动。掌握元素的定位，能够为元素设置常见的定位模式。4学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果。1掌目录盒子模型相关属性☞点击查看本小节知识架构元素的类型与转换☞点击查看本小节知识架构元素的浮动☞点击查看本小节知识架构【任务4-1】认识盒子模型元素的定位☞点击查看本小节知识架构【任务4-2】【任务4-3】【任务4-4】【任务4-5】☞点击查看本小节知识架构目录盒子模型相关属性☞点击查看本小节知识架构元素的类型与目录制作导航及banner模块制作最新动态模块制作样片欣赏模块布局及定义基础样式制作页脚及悬浮框模块【任务4-6】【任务4-7】【任务4-8】【任务4-9】【任务4-10】目录制作导航及banner模块制作最新动态模块制作样片欣知识架构【任务4-1】认识盒子模型1认识盒子模型知识架构【任务4-1】认识盒子模型1认识盒子模型【任务4-2】盒子模型相关属性边框属性内边距属性外边距属性知识架构背景属性盒子的宽与高12345【任务4-2】盒子模型相关属性边框属性内边距属性外边距属【任务4-3】

元素的类型与转换元素的类型<span>标记元素的转换知识架构123【任务4-3】元素的类型与转换元素的类型<span>标记

【任务4-4】元素的浮动元素的浮动属性清除浮动知识架构12overflow属性3【任务4-4】元素的浮动

【任务4-5】元素的定位元素的定位属性静态定位知识架构相对定位固定定位绝对定位z-index层叠等级属性123456【任务4-5】元素的定位盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。

【任务4-1】认识盒子模型下面将带领读者认识盒子模型。盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征

【任务4-1】认识盒子模型认识盒子模型什么是盒子模型？1.【任务4-1】认识盒子模认识盒子模型联想一下生活中常见的盒子？它们的共同特点

【任务4-1】认识盒子模型1.认识盒子模型联想一下生活中常见的盒子？它们的共同特点认识盒子模型以手机盒子为例，分析盒子模型

【任务4-1】认识盒子模型1.认识盒子模型以手机盒子为例，分析盒子模型

【任务4-2】盒子模型相关属性盒子模型的相关属性包括边框属性、内外边距属性、背景属性和宽高属性，通过设置这些属性可使元素的表现形式更加多样化。下面，将对盒子模型的相关属性进行详细讲解。【任务4-2】盒子模边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果。

【任务4-2】盒子模型相关属性1.边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果边框属性CSS边框属性none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线边框样式（border-style）属性值border-style综合属性

border-style:solid;/*四边均为实线*/

border-style:soliddotted;/*上下实线、左右点线*/border-style:soliddotteddashed;/*上实线、左右点线、下虚线*/

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性none：没有边框solid：边框为单边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）属性值在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。注意：常用取值单位为像素。

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）属性值border-width:5px;/*四边宽度均为5像素*/border-width:5px3px;/*上下边框5像素宽度、左右边框3像素宽度*/border-width:5px3px4px;/*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/border-width综合属性

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）属性值颜色值，例：red、green#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)实际工作中最常用#十六进制色值，例：#ccc

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）属性值border-color:#f00;/*四边均为红色*/border-color:#f00#00f;/*上下红色、左右蓝色*/border-color:#f00#00f#0f0;/*上红色、左右蓝色、下绿色*/border-color综合属性

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）边框综合属性（border）border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;border:宽度,样式,颜色注意：宽度、样式、颜色顺序任意，不分先后

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）内边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距外边距内边距（内填充）padding-top:上边距;padding-right:右边距;padding-bottom:下边距;padding-left:左边距;padding：四边内边距;注意：内边距padding不允许使用负值padding:5px/*四个方向内边距为5像素宽度*/padding:5px3px/*上下内边距为5像素，左右内边距为3像素*/padding:5px3px4px/*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/

【任务4-2】盒子模型相关属性2.内边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距外边距内边距外边距（margin）margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;margin:四边外边距;margin:5px/*四边外边距为5像素宽度*/margin:5px3px/*上下外边距为5像素，左右外边距为3像素*/margin:5px3px4px/*外边距：上为5像素，左右为3像素，下为4像素*/注意：和内边距不同，外边距margin允许使用负值

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距内边距当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。margin:0auto/*利用margin实现块元素水平居中*/margin:5pxauto/*利用margin实现块元素水平居中，并且上下拉开5像素边距*/

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距内边距为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。*{ padding:0;/*清除内边距*/ margin:0;/*清除外边距*/}内外边距清除

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以将图像作为网页元素的背景，通过background-image属性实现。background-image:背景颜色属性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}

【任务4-2】盒子模型相关属性背景属性4.在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。background-repeat图像平铺属性背景属性

【任务4-2】盒子模型相关属性4.默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希背景属性background-position图像位置属性

【任务4-2】盒子模型相关属性4.背景属性background-position图像位置属性设置背景图像固定background-attachment图像固定属性

【任务4-2】盒子模型相关属性4.设置背景图像固定background-attachment图综合设置元素的背景CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。background:背景色url(“图像”)平铺定位固定;在上述语法格式中，各个样式顺序任意，中间用空格隔开，不需要的样式可以省略。但实际工作中通常按照背景色、url("图像")、平铺、定位、固定的顺序来书写。

【任务4-2】盒子模型相关属性4.综合设置元素的背景CSS中的背景属性也是一个复合属性，可以将盒子的宽与高盒子总宽度和总高度☞网页是由多个盒子排列而成☞宽度和高度决定了盒子的大小高度宽度

【任务4-2】盒子模型相关属性5.盒子的宽与高盒子总宽度和总高度☞网页是由多个盒子排列而成高盒子的宽与高

width

左内边距

右内边距边框

左外边距

右外边距☞每个盒子都有固定的大小

边框盒子总宽度和总高度

【任务4-2】盒子模型相关属性5.盒子的宽与高width左内边距右内边距边框盒子的宽与高结论盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和盒子模型的总宽度与总高度

【任务4-2】盒子模型相关属性5.盒子的宽与高结论盒子的总宽度=width+左右内边距之和+在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素”。什么是块级元素？在HTML标记语言中元素又是如何分类的呢？

【任务4-3】元素的类型与转换下面将对元素的类型与转换进行详细讲解。在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素元素的类型HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。在页面中以区域块的形式出现。每个块元素通常都会独自占据一整行或多整行。可以对其设置宽度、高度、对齐等属性。不占有独立的区域。仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。

【任务4-3】元素的类型与转换1.元素的类型HTML标记被定义成了不同的类型，一般分为块标记和元素的类型<p><ul>常见的块元素<h1>—<h6><ol><div><li>其中<div>标记是最典型的块元素。

【任务4-3】元素的类型与转换1.元素的类型<p><ul>常见的块元素<h1>—<h6><ol元素的类型<a><em>常见的行内元素<strong><span><b><u>其中<span>标记最典型的行内元素。

【任务4-3】元素的类型与转换1.元素的类型<a><em>常见的行内元素<strong><sp<span>标记1<span>标记是一个行内标记。2<span>与</span>之间只能包含文本和各种行内标记。3

<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。4当其他行内标记都不合适时，就可以使用<span>标记。

【任务4-3】元素的类型与转换2.<span>标记<span>标记是一个行内标记。<span>元素的转换displayblockinline-blocknone此元素将显示为行内元素（行内元素默认的display属性值）。此元素将显示为块元素（块元素默认的display属性值）。此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。此元素将被隐藏，不显示，也不占用页面空间。

【任务4-3】元素的类型与转换3.元素的转换displayblockinline-blockn

【任务4-3】元素的类型与转换块元素垂直外边距的合并知识拓展【任务4-3】元素的类块元素垂直外边距的合并形式相邻元素垂直外边距的合并嵌套元素垂直外边距的合并外边距外边距外边距

【任务4-3】元素的类型与转换块元素垂直外边距的合并形式相邻元素垂直相邻块元素垂直外边距的合并1相邻块元素之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

【任务4-3】元素的类型与转换相邻块元素垂直外边距的合并1相邻块元素之间的垂直间距不是ma嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

【任务4-3】元素的类型与转换嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一

一罗列。呆板不美观为元素设置浮动，可以使页面元素变得整齐有序。下面，将对元素的浮动进行详细讲解。

【任务4-4】元素的浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素的浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动，其实大家并不陌生

【任务4-4】元素的浮动1.元素的浮动属性float究竟是什么是浮动？应用排列图文排列论元素的浮动属性float所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

【任务4-4】元素的浮动1.元素的浮动属性float所谓元素的浮动是指设置了浮动属性的元元素的浮动属性float基本语法格式选择器{float:属性值;}

【任务4-4】元素的浮动1.元素的浮动属性float基本语法格式选择器{float:属性清除浮动为什么要清除浮动？

【任务4-4】元素的浮动2.清除浮动为什么要清除浮动？【由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。清除浮动

【任务4-4】元素的浮动2.由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素运用clear属性清除浮动基本语法格式选择器{clear:属性值;}常用属性值清除浮动

【任务4-4】元素的浮动2.运用clear属性清除浮动基本语法格式选择器{clear:属例如：运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。清除浮动

【任务4-4】元素的浮动2.例如：运用clear属性只能清除元素左右两侧浮动的影响。然而清除浮动空标记overflowafter伪对象在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除浮动。这个空标记可以为<div>、<p>、<hr/>等任何标记。“overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。010203

【任务4-4】元素的浮动2.清除浮动空标记overflowafter伪对象在浮动元素之后overflow属性

【任务4-4】元素的浮动3.overflow属性可以解决溢出问题，其基本语法格式如下：选择器{overflow:属性值;}overflow属性的常用值有四个，具体如下表所示。overflow属性【任务4浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

【任务4-5】元素的定位下面，将对元素的定位进行详细讲解。浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在C元素的定位属性什么是定位？

【任务4-5】元素的定位1.元素的定位属性什么是定位？【元素的定位属性在CSS中，通过CSS定位（CSSposition）可以实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。

【任务4-5】元素的定位1.元素的定位属性在CSS中，通过CSS定位（CSSposit元素的定位属性选择器{position:属性值；}position属性用于定义元素的定位模式，其基本语法格式如下：position属性的常用值有四个，具体如下表所示。定位模式

【任务4-5】元素的定位1.元素的定位属性选择器{position:属性值；}posit元素的定位属性边偏移通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如下表所示。

【任务4-5】元素的定位1.元素的定位属性边偏移通过边偏移属性top、bottom、le静态定位static静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

【任务4-5】元素的定位2.静态定位static静态定位是元素的默认定位方式，当posi相对定位relative相对定位是将元素相对于它在标准文档流中的位置进行定位。定位前定位后

【任务4-5】元素的定位3.相对定位relative相对定位是将元素相对于它在标准文档流相对定位relative距离左边150px距离上图100px在文档流中的位置仍然保留着

【任务4-5】元素的定位3.相对定位relative距离左边150px距离上图100px绝对定位absolute绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素进行定位，若所有父元素都没有定位，则依据body根元素（浏览器窗口）进行定位。定位前定位后

【任务4-5】元素的定位4.绝对定位absolute绝对定位是将元素依据最近的已经定位（绝对定位absolute距离左边150px距离顶部100px在文档流中的位置没被保存

【任务4-5】元素的定位4.绝对定位absolute距离左边150px距离顶部100px固定定位fixed固定定位是绝对定位的一种特殊形式，它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

【任务4-5】元素的定位5.固定定位fixed固定定位是绝对定位的一种特殊形式，它以浏览z-index层叠等级属性当对多个元素同时设置定位时，定位元素之间有可能会发生重叠，如右图所示。定位导致重叠z-index可以调整重叠定位元素的堆叠顺序，其取值可为正整数、负整数和0。z-index的默认值是0。解决重叠问题

【任务4-5】元素的定位6.z-index层叠等级属性当对多个元素同时设置定位时，定位元网站项目”青春树儿童摄影网”首页制作该怎样开发一个网站项目呢？“青春树儿童摄影网”首页制作网站项目”青春树儿童摄影网”首页制作该怎样开发一个“青春树儿

【任务4-6】布局及定义基础样式【任务4-6】拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义基础样式

【任务4-6】布局及定义基础样式效果分析建立站点切图准备工作拿到效果图后的准备工作对页面进行布局，并添加CSS样式。定义准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根目录下新建文件step1step2step3step4

【任务4-6】布局及定义基础样式准备工作→建立站点1.创建网站根目录新建站点站点建立完成在根1.

【任务4-6】布局及定义基础样式使用AdobeFireworksCS6的切片工具，导出“青春树儿童摄影网”首页中的素材图片，存储在站点中的images文件夹中。准备工作→切图1.【任务4-6】效果分析2.HTML结构分析CSS样式分析页面中的各个模块居中显示，宽度为980px，因此，页面的版心为980px。另外，页面中的所有字体均为微软雅黑，背景颜色为#fdfdfd，这些可以通过CSS公共样式进行定义。“青春树儿童摄影网”首页面从上到下可以分为5个模块。

【任务4-6】布局及定义基础样式效果分析2.HTML结构分析CSS页面中的各个模块居中效果分析2.“青春树儿童摄影网”首页面从上到下可以分为5个模块。

【任务4-6】布局及定义基础样式效果分析2.“青春树儿童摄影网”首页面从上到下可以分为5个模定义基础样式3.

【任务4-6】布局及定义基础样式/*重置浏览器的默认样式*/*{margin:0;padding:0;border:0;background:none;}/*全局控制*/body{font-family:"微软雅黑";background:#fdfdfd;}定义基础样式3.【制作导航及banner模块1.效果图如下所示：

【任务4-7】制作导航及banner模块制作导航及banner模块1.效果图如下所示：制作最新动态模块1.效果图如下所示：【任务4-8】制作最新动态模块制作最新动态模块1.效果图如下所示：【任务4-8】制作最制作样片欣赏模块1.效果图如下所示：【任务4-9】制作样片欣赏模块制作样片欣赏模块1.效果图如下所示：【任务4-9】制作样片欣制作页脚及悬浮框模块1.效果图如下所示：【任务4-10】制作页脚及悬浮框模块制作页脚及悬浮框模块1.效果图如下所示：【任务4-10】制作【项目总结】1.盒子模型是CSS网页布局的基础，建议读者认真体会。好的布局可以大大减少页面的兼容bug。2.块元素与行内元素也是本项目的重点哦，通过本项目的学习，你是不是能够根据页面需求灵活的实现它们之间的转换呢！3.使用HTML、CSS制作页面时，处处可见“浮动”，DIV+“浮动”布局是不是很神奇呢。另外提醒读者孰能生巧，多多练习才能提高代码编写效率哦!【项目总结】1.盒子模型是CSS网页布局的基础，建议读者网页设计与制作项目教程项目4“青春树儿童摄影网”课件项目4“青春树儿童摄影网”首页制作·

盒子相关属性·

元素的浮动和定位·认识盒子模型·元素的类型与转换

HTML项目4“青春树儿童摄影网”首页制作·盒子相关属性·认识盒学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果。1掌握理解掌握熟悉2理解背景属性的设置方法，能够设置背景颜色和图像

。3熟悉清除浮动的方法，可以使用不同方法清除浮动。掌握元素的定位，能够为元素设置常见的定位模式。4学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果。1掌目录盒子模型相关属性☞点击查看本小节知识架构元素的类型与转换☞点击查看本小节知识架构元素的浮动☞点击查看本小节知识架构【任务4-1】认识盒子模型元素的定位☞点击查看本小节知识架构【任务4-2】【任务4-3】【任务4-4】【任务4-5】☞点击查看本小节知识架构目录盒子模型相关属性☞点击查看本小节知识架构元素的类型与目录制作导航及banner模块制作最新动态模块制作样片欣赏模块布局及定义基础样式制作页脚及悬浮框模块【任务4-6】【任务4-7】【任务4-8】【任务4-9】【任务4-10】目录制作导航及banner模块制作最新动态模块制作样片欣知识架构【任务4-1】认识盒子模型1认识盒子模型知识架构【任务4-1】认识盒子模型1认识盒子模型【任务4-2】盒子模型相关属性边框属性内边距属性外边距属性知识架构背景属性盒子的宽与高12345【任务4-2】盒子模型相关属性边框属性内边距属性外边距属【任务4-3】

元素的类型与转换元素的类型<span>标记元素的转换知识架构123【任务4-3】元素的类型与转换元素的类型<span>标记

【任务4-4】元素的浮动元素的浮动属性清除浮动知识架构12overflow属性3【任务4-4】元素的浮动

【任务4-5】元素的定位元素的定位属性静态定位知识架构相对定位固定定位绝对定位z-index层叠等级属性123456【任务4-5】元素的定位盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征，才可以更好地控制网页中各个元素所呈现的效果。

【任务4-1】认识盒子模型下面将带领读者认识盒子模型。盒子模型是网页布局的基础，只有掌握了盒子模型的各种规律和特征

【任务4-1】认识盒子模型认识盒子模型什么是盒子模型？1.【任务4-1】认识盒子模认识盒子模型联想一下生活中常见的盒子？它们的共同特点

【任务4-1】认识盒子模型1.认识盒子模型联想一下生活中常见的盒子？它们的共同特点认识盒子模型以手机盒子为例，分析盒子模型

【任务4-1】认识盒子模型1.认识盒子模型以手机盒子为例，分析盒子模型

【任务4-2】盒子模型相关属性盒子模型的相关属性包括边框属性、内外边距属性、背景属性和宽高属性，通过设置这些属性可使元素的表现形式更加多样化。下面，将对盒子模型的相关属性进行详细讲解。【任务4-2】盒子模边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果。

【任务4-2】盒子模型相关属性1.边框属性为了分割页面中不同的盒子，常常需要给元素设置边框效果边框属性CSS边框属性none：没有边框solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线边框样式（border-style）属性值border-style综合属性

border-style:solid;/*四边均为实线*/

border-style:soliddotted;/*上下实线、左右点线*/border-style:soliddotteddashed;/*上实线、左右点线、下虚线*/

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性none：没有边框solid：边框为单边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）属性值在设置边框宽度时，必须同时设置边框样式，如果未设置样式或设置为none，则不论宽度设置为多少都无效。注意：常用取值单位为像素。

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）属性值border-width:5px;/*四边宽度均为5像素*/border-width:5px3px;/*上下边框5像素宽度、左右边框3像素宽度*/border-width:5px3px4px;/*上边框5像素宽、左右边框3像素宽度、下边框4像素宽度*/border-width综合属性

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）属性值颜色值，例：red、green#十六进制色值，例：#cccrgb(r,g,b)，例：rgb(30,0,0)rgb(r%,g%,b%)实际工作中最常用#十六进制色值，例：#ccc

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）属性值border-color:#f00;/*四边均为红色*/border-color:#f00#00f;/*上下红色、左右蓝色*/border-color:#f00#00f#0f0;/*上红色、左右蓝色、下绿色*/border-color综合属性

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）边框属性CSS边框属性边框样式（border-style）边框宽度（border-width）边框颜色（border-color）边框综合属性（border）border-top:上边框宽度样式颜色;border-right:右边框宽度样式颜色;border-bottom:下边框宽度样式颜色;border-left:左边框宽度样式颜色;border:四边宽度样式颜色;border:宽度,样式,颜色注意：宽度、样式、颜色顺序任意，不分先后

【任务4-2】盒子模型相关属性1.边框属性CSS边框属性边框样式（border-style）内边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距外边距内边距（内填充）padding-top:上边距;padding-right:右边距;padding-bottom:下边距;padding-left:左边距;padding：四边内边距;注意：内边距padding不允许使用负值padding:5px/*四个方向内边距为5像素宽度*/padding:5px3px/*上下内边距为5像素，左右内边距为3像素*/padding:5px3px4px/*上内边距为5像素，左右内边距为3像素，下内边距为4像素*/

【任务4-2】盒子模型相关属性2.内边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距外边距内边距外边距（margin）margin-top:上外边距;margin-right:右外边距;margin-bottom:下外边距;margin-left:左外边距;margin:四边外边距;margin:5px/*四边外边距为5像素宽度*/margin:5px3px/*上下外边距为5像素，左右外边距为3像素*/margin:5px3px4px/*外边距：上为5像素，左右为3像素，下为4像素*/注意：和内边距不同，外边距margin允许使用负值

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距内边距当对块级元素应用宽度属性width，并将左右的外边距都设置为auto，可使块级元素水平居中，实际工作中常用这种方式进行网页布局。margin:0auto/*利用margin实现块元素水平居中*/margin:5pxauto/*利用margin实现块元素水平居中，并且上下拉开5像素边距*/

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边距外边距内边距为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。*{ padding:0;/*清除内边距*/ margin:0;/*清除外边距*/}内外边距清除

【任务4-2】盒子模型相关属性3.外边距属性CSS的边距属性包括“内边距”和“外边距”两种内边在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以将图像作为网页元素的背景，通过background-image属性实现。background-image:背景颜色属性例如：body{background-color:#CCC;background-image:url(images/jianbian.jpg);}

【任务4-2】盒子模型相关属性背景属性4.在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。background-repeat图像平铺属性背景属性

【任务4-2】盒子模型相关属性4.默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希背景属性background-position图像位置属性

【任务4-2】盒子模型相关属性4.背景属性background-position图像位置属性设置背景图像固定background-attachment图像固定属性

【任务4-2】盒子模型相关属性4.设置背景图像固定background-attachment图综合设置元素的背景CSS中的背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。background:背景色url(“图像”)平铺定位固定;在上述语法格式中，各个样式顺序任意，中间用空格隔开，不需要的样式可以省略。但实际工作中通常按照背景色、url("图像")、平铺、定位、固定的顺序来书写。

【任务4-2】盒子模型相关属性4.综合设置元素的背景CSS中的背景属性也是一个复合属性，可以将盒子的宽与高盒子总宽度和总高度☞网页是由多个盒子排列而成☞宽度和高度决定了盒子的大小高度宽度

【任务4-2】盒子模型相关属性5.盒子的宽与高盒子总宽度和总高度☞网页是由多个盒子排列而成高盒子的宽与高

width

左内边距

右内边距边框

左外边距

右外边距☞每个盒子都有固定的大小

边框盒子总宽度和总高度

【任务4-2】盒子模型相关属性5.盒子的宽与高width左内边距右内边距边框盒子的宽与高结论盒子的总宽度=width+左右内边距之和+左右边框宽度之和+左右外边距之和盒子的总高度=height+上下内边距之和+上下边框宽度之和+上下外边距之和盒子模型的总宽度与总高度

【任务4-2】盒子模型相关属性5.盒子的宽与高结论盒子的总宽度=width+左右内边距之和+在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素”。什么是块级元素？在HTML标记语言中元素又是如何分类的呢？

【任务4-3】元素的类型与转换下面将对元素的类型与转换进行详细讲解。在前面的章节中介绍CSS属性时，经常会提到“仅适用于块级元素元素的类型HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。在页面中以区域块的形式出现。每个块元素通常都会独自占据一整行或多整行。可以对其设置宽度、高度、对齐等属性。不占有独立的区域。仅仅靠自身的字体大小和图像尺寸来支撑结构。一般不可以设置宽度、高度、对齐等属性。

【任务4-3】元素的类型与转换1.元素的类型HTML标记被定义成了不同的类型，一般分为块标记和元素的类型<p><ul>常见的块元素<h1>—<h6><ol><div><li>其中<div>标记是最典型的块元素。

【任务4-3】元素的类型与转换1.元素的类型<p><ul>常见的块元素<h1>—<h6><ol元素的类型<a><em>常见的行内元素<strong><span><b><u>其中<span>标记最典型的行内元素。

【任务4-3】元素的类型与转换1.元素的类型<a><em>常见的行内元素<strong><sp<span>标记1<span>标记是一个行内标记。2<span>与</span>之间只能包含文本和各种行内标记。3

<span>标记常用于定义网页中某些特殊显示的文本，配合class属性使用。4当其他行内标记都不合适时，就可以使用<span>标记。

【任务4-3】元素的类型与转换2.<span>标记<span>标记是一个行内标记。<span>元素的转换displayblockinline-blocknone此元素将显示为行内元素（行内元素默认的display属性值）。此元素将显示为块元素（块元素默认的display属性值）。此元素将显示为行内块元素，可以对其设置宽高和对齐等属性，但是该元素不会独占一行。此元素将被隐藏，不显示，也不占用页面空间。

【任务4-3】元素的类型与转换3.元素的转换displayblockinline-blockn

【任务4-3】元素的类型与转换块元素垂直外边距的合并知识拓展【任务4-3】元素的类块元素垂直外边距的合并形式相邻元素垂直外边距的合并嵌套元素垂直外边距的合并外边距外边距外边距

【任务4-3】元素的类型与转换块元素垂直外边距的合并形式相邻元素垂直相邻块元素垂直外边距的合并1相邻块元素之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。

【任务4-3】元素的类型与转换相邻块元素垂直外边距的合并1相邻块元素之间的垂直间距不是ma嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者。

【任务4-3】元素的类型与转换嵌套块元素垂直外边距的合并2对于两个嵌套关系的块元素，如果父初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素从上到下一

一罗列。呆板不美观为元素设置浮动，可以使页面元素变得整齐有序。下面，将对元素的浮动进行详细讲解。

【任务4-4】元素的浮动初学者在设计一个页面时，通常会按照默认的排版方式，将页面中的元素的浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动，其实大家并不陌生

【任务4-4】元素的浮动1.元素的浮动属性float究竟是什么是浮动？应用排列图文排列论元素的浮动属性float所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

【任务4-4】元素的浮动1.元素的浮动属性float所谓元素的浮动是指设置了浮动属性的元元素的浮动属性float基本语法格式选择器{float:属性值;}

【任务4-4】元素的浮动1.元素的浮动属性float基本语法格式选择器{float:属性清除浮动为什么要清除浮动？

【任务4-4】元素的浮动2.清除浮动为什么要清除浮动？【由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素的排版产生影响，如果要避免这种影响，就需要对元素清除浮动。清除浮动

【任务4-4】元素的浮动2.由于浮动元素不再占用原文档流中的位置，所以会对页面中其他元素运用clear属性清除浮动基本语法格式选择器{clear:属性值;}常用属性值清除浮动

【任务4-4】元素的浮动2.运用clear属性清除浮动基本语法格式选择器{clear:属例如：运用clear属性只能清除元素左右两侧浮动的影响。然而在制作网页时，经常会遇到一些特殊的浮动影响。清除浮动

【任务4-4】元素的浮动2.例如：运用clear属性只能清除元素左右两侧浮动的影响。然而清除浮动空标记overflowafter伪对象在浮动元素之后添加空标记，并对该标记应用“clear:both”样式，可清除浮动。这个空标记可以为<div>、<p>、<hr/>等任何标记。“overflow:hidden;”样式，也可以清除浮动对该元素的影响，该方法弥补了空标记清除浮动的不足。使用after伪对象也可以清除浮动，但是该方法只适用于IE8及以上版本浏览器和其他非IE浏览器。010203

【任务4-4】元素的浮动2.清除浮动空标记overflowafter伪对象在浮动元素之后overflow属性

【任务4-4】元素的浮动3.overflow属性可以解决溢出问题，其基本语法格式如下：选择器{overflow:属性值;}overflow属性的常用值有四个，具体如下表所示。overflow属性【任务4浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在CSS中，通过定位属性可以实现网页中元素的精确定位。

【任务4-5】元素的定位下面，将对元素的定位进行详细讲解。浮动布局虽然灵活，但是却无法对元素的位置进行精确的控制。在C元素的定位属性什么是定位？

【任务4-5】元素的定位1.元素的定位属性什么是定位？【元素的定位属性在CSS中，通过CSS定位（CSSposition）可以实现网页元素的精确定位。元素的定位属性主要包括定位模式和边偏移两部分。

【任务4-5】元素的定位1.元素的定位属性在CSS中，通过CSS定位（CSSposit元素的定位属性选择器{position:属性值；}position属性用于定义元素的定位模式，其基本语法格式如下：position属性的常用值有四个，具体如下表所示。定位模式

【任务4-5】元素的定位1.元素的定位属性选择器{position:属性值；}posit元素的定位属性边偏移通过边偏移属性top、bottom、left或right，来精确定义定位元素的位置，其取值为不同单位的数值或百分比，如下表所示。

【任务4-5】元素的定位1.元素的定位属性边偏移通过边偏移属性top、bottom、le静态定位static静态定位是元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。所谓静态位置就是各个元素在HTML文档流中默认的位置。任何元素在默认状态下都会以静态定位来确定自己的位置，所以当没有定义position属性时，并不说明该元素没有自己的位置，它会遵循默认值显示为静态位置。在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

【任务4-5】元素的定位2.静态定位static静态定位是元素的默认定位方式，当posi相对定位relative相对定位是将元素相对于它在标准文档流中的位置进行定位。定