童年是人生岁月中最纯真的年代, 也是被家人呵护, 受尽百般宠爱的黄金时期为此, 每位家长都希望给孩子的童年多留下些美好回忆, 除了录制视频以外, 儿童摄影也是很不错的选择为了使更多的家长了解到儿童摄影, 青春树儿童摄影的 CEO 李总致电 HC 公司项目负责人王经理, 计划定制一个主题网站,

Size: px

Start display at page:

Download "童年是人生岁月中最纯真的年代, 也是被家人呵护, 受尽百般宠爱的黄金时期为此, 每位家长都希望给孩子的童年多留下些美好回忆, 除了录制视频以外, 儿童摄影也是很不错的选择为了使更多的家长了解到儿童摄影, 青春树儿童摄影的 CEO 李总致电 HC 公司项目负责人王经理, 计划定制一个主题网站,"

烟津皮
5 years ago
Views:

1 项目 4 青春树儿童摄影网首页制作知识目标技能目标了解盒子模型的概念掌握盒子的相关属性熟悉元素的类型与转换掌握元素的浮动与定位掌握清除浮动的方法能够使用 DIV 标记与浮动样式对页面进行布局项目描述完成后的网页效果如图 4-1 所示图 4-1 儿童摄影网专题页效果展示 1

童年是人生岁月中最纯真的年代, 也是被家人呵护, 受尽百般宠爱的黄金时期为此, 每位家长都希望给孩子的童年多留下些美好回忆, 除了录制视频以外, 儿童摄影也是很不错的选择为了使更多的家长了解到儿童摄影, 青春树儿童摄影的 CEO 李总致电 HC 公司项目负责人王经理, 计划定制一个主题网站, 用于宣传青春树儿童摄影通过前面两个专题页的制作, 小黄已经有了一定的 HTML 与 CSS

才可以更好地控制网页中各个元素所呈现的效果, 下面将带领读者认识盒子模型知识储备 1 认识盒子模型所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子, 也就是一个盛装内容的容器每个矩形都由元素的内容内边距 (padding) 边框(border) 和外边距 (margin) 组成为了更形象地认识 CSS 盒子模型, 首先我们从生活中常见的手机盒子的构成说起, 如图 4-2

2 童年是人生岁月中最纯真的年代, 也是被家人呵护, 受尽百般宠爱的黄金时期为此, 每位家长都希望给孩子的童年多留下些美好回忆, 除了录制视频以外, 儿童摄影也是很不错的选择为了使更多的家长了解到儿童摄影, 青春树儿童摄影的 CEO 李总致电 HC 公司项目负责人王经理, 计划定制一个主题网站, 用于宣传青春树儿童摄影通过前面两个专题页的制作, 小黄已经有了一定的 HTML 与 CSS 基础接到王经理安排的青春树儿童摄影主题网站任务后, 小黄制定了这段时间的学习计划 : 巩固盒子模型元素的类型与转换浮动与定位等布局相关的基础知识, 然后再动手制作该主题网站由于篇幅限制, 本项目只讲解青春树儿童摄影主题网站首页面任务 4-1 认识盒子模型需求分析盒子模型是 CSS 网页布局的基础, 它替代了传统的表格布局只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果, 下面将带领读者认识盒子模型知识储备 1 认识盒子模型所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子, 也就是一个盛装内容的容器每个矩形都由元素的内容内边距 (padding) 边框(border) 和外边距 (margin) 组成为了更形象地认识 CSS 盒子模型, 首先我们从生活中常见的手机盒子的构成说起, 如图 4-2 所示图 4-2 手机盒子的构成图 4-3 多个手机盒子一个完整的手机盒子通常包含手机填充泡沫和盛装手机的纸盒如果把手机想象成 HTML 元素, 那么手机盒子就是一个 CSS 盒子模型, 其中手机为 CSS 盒子模型的内容, 填充泡沫的厚度为 CSS 盒子模型的内边距, 纸盒的厚度为 CSS 盒子模型的边框, 如图 4-2 所示当多个手机盒子放在一起时, 它们之间的间距就是 CSS 盒子模型的外边距, 如图 4-3 所示熟悉了盒子模型的概念, 下面来认识到底什么是盒子模型新建 HTML 页面, 并在页面中添加一个段落, 然后通过盒子模型相关属性对段落进行控制, 如例 4-1 所示例 4-1 example01.html 2

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

3 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 认识盒子模型 </title> 7 <style type="text/css"> 8.box{ 9 width:250px; /* 盒子模型的宽度 */ 10 height:50px; /* 盒子模型的高度 */ 11 border:15px solid red; /* 盒子模型的边框 */ 12 background:pink; /* 盒子模型的背景 */ 13 padding:30px; /* 盒子模型的内边距 */ 14 margin:20px; /* 盒子模型的外边距 */ 15 } 16 </style> 17 </head> 18 <body> 19 <p class="box"> 盒子中包含的内容 </p> 20 </body> 21 </html> 在例 4-1 中, 通过盒子模型的属性对段落进行控制运行例 4-1, 效果如图 4-4 所示图 4-4 盒子在浏览器中的效果在例 4-1 中 <p> 标记就是一个盒子, 其构成如图 4-5 所示 3

图 4-5 盒子模型结构网页中所有的元素和对象都是由图 4-5 所示的基本结构组成, 并呈现出矩形的盒子效果在浏览器看来, 网页就是多个盒子嵌套排列的结果其中, 内边距出现在内容区域的周围, 当给元素添加背景色或背景图像时, 该元素的背景色或背景图像也将出现在内边距中, 外边距是该元素与相邻元素之间的距离, 如果给元素定义边框属性, 边框将出现在内边距和外边距之间任务 4-2

4 图 4-5 盒子模型结构网页中所有的元素和对象都是由图 4-5 所示的基本结构组成, 并呈现出矩形的盒子效果在浏览器看来, 网页就是多个盒子嵌套排列的结果其中, 内边距出现在内容区域的周围, 当给元素添加背景色或背景图像时, 该元素的背景色或背景图像也将出现在内边距中, 外边距是该元素与相邻元素之间的距离, 如果给元素定义边框属性, 边框将出现在内边距和外边距之间任务 4-2 盒子模型相关属性需求分析盒子模型的相关属性包括边框属性内外边距属性背景属性和宽高属性, 通过设置这些属性可使元素的表现形式更加多样化需要注意的是, 虽然盒子模型拥有边框内外边距背景宽和高这些基本属性, 但是并不要求每个元素都必须定义这些属性知识储备 1 边框属性为了分割页面中不同的盒子, 常常需要给元素设置边框效果在 CSS 中边框属性包括边框样式属性 (border-style) 边框宽度属性(border-width) 边框颜色属性(border-color) 单侧边框的属性边框的综合属性, 如表 4-1 所示表 4-1 CSS 边框属性设置内容样式属性常用属性值上边框 border-top-style: 样式 ; border-top-width: 宽度 ; border-top-color: 颜色 ; border-top: 宽度样式颜色 ; 下边框 border-bottom-style: 样式 ; border- bottom-width: 宽度 ; border- bottom-color: 颜色 ; border-bottom: 宽度样式颜色 ; 左边框 border-left-style: 样式 ; border-left-width: 宽度 ; 4

5 border-left-color: 颜色 ; border-left: 宽度样式颜色 ; border-right-style: 样式 ; border-right-width: 宽度 ; 右边框 border-right-color: 颜色 ; border-right: 宽度样式颜色 ; none 无 ( 默认 ) solid 单实线 dashed 虚线样式综合设置 border-style: 上边 [ 右边下边左边 ]; dotted 点线 double 双实线宽度综合设置 border-width: 上边 [ 右边下边左边 ]; 像素值颜色值 # 十六进制 rgb(r,g,b) 颜色综合设置 border-color: 上边 [ 右边下边左边 ]; rgb(r%,g%,b%) 边框综合设置 border: 四边宽度四边样式四边颜色 ; 表 4-1 中列出了所有的边框属性, 对于初学者来说比较难以理解, 下面对表 4-1 中的属性进行具体讲解 (1) 设置边框样式 (border-style) 边框样式用于定义页面中边框的风格, 常用属性值如下 : none: 没有边框即忽略所有边框的宽度 ( 默认值 ) solid: 边框为单实线 dashed: 边框为虚线 dotted: 边框为点线 double: 边框为双实线在设置边框样式时, 既可以对盒子的单边进行设置, 也可以综合设置四条边的样式, 具体如下 : border-top-style: 上边框样式 ; border-right-style: 右边框样式 ; border-bottom-style: 下边框样式 ; border-left-style: 左边框样式 ; border-style: 上边框样式右边框样式下边框样式左边框样式 ; border-style: 上边框样式左右边框样式下边框样式 ; border-style: 上下边框样式左右边框样式 ; border-style: 上下左右边框样式 ; 使用 border-style 属性综合设置四边样式时, 必须按上右下左的顺时针顺序, 省略时采用值复制的原则, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下例如 <p> 只有上边为虚线 dashed, 其他三边为单实线 solid, 可以使用 border-style 综合属性分别设置各边样式 : p{ borer-style:dashed solid solid solid;} 或综合设置四条边, 然后采用上边覆盖 : p{ border-style:solid;} /* 综合设置四边样式 */ p{ border-top-style:dashed;} /* 上边样式覆盖 */ 下面通过一个案例对边框样式属性进行演示新建 HTML 页面, 并在页面中添加标题和段落文本, 然后通过边框样式属性控制标题和段落的边框效果, 如例 4-2 所示例 4-2 example02.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 5

6 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置边框样式 </title> 7 <style type="text/css"> 8 h2{border-style:solid;} /*4 条边框相同单实线 */ 9.one{border-style:dotted double;} /* 上下为点线左右为双实线 */ 10.two{border-style:dashed dotted solid;} /* 上虚线左右点线下实线 */ 11 </style> 12 </head> 13 <body> 14 <h2> 边框为单实线 </h2> 15 <p class="one"> 上下边框为点线, 左右边框为双实线 </p> 16 <p class="two"> 上边框虚线左右边框点线下边框实线 </p> 17 </body> 18 </html> 在例 4-2 中, 使用边框样式 border-style 的综合和单边属性, 设置标题和段落文本的边框样式运行例 4-2, 效果如图 4-6 所示图 4-6 边框样式效果注意 : 点线 dotted 和虚线 dashed 样式存在兼容问题实际网页制作中, 通常使用插入背景图像的形式实现点线或虚线的边框效果 (2) 设置边框宽度 (border-width) border-width 属性用于设置边框的宽度, 其常用取值单位为像素 px 同边框样式一样, 边框宽度也可以针对四条边分别设置, 或综合设置四条边的宽度, 具体如下 : border-top-width: 上边框宽度 ; border-right-width: 右边框宽度 ; border-bottom-width: 下边框宽度 ; border-left-width: 左边框宽度 ; border- width: 上边框宽度 [ 右边框宽度下边框宽度左边框宽度 ]; 综合设置四边宽度必须按上右下左的顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下下面通过一个案例对边框宽度属性进行演示新建 HTML 页面, 并在页面中添加 3 个段落文本, 然后通过边框宽度属性分别控制各段落的边框样式, 如例 4-3 所示例 4-3 example03.html 6

7 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置边框宽度 </title> 7 <style type="text/css"> 8.one{border-width:6px;} 9.two{border-width:4px 2px;} 10.three{border-width:6px 4px 2px;} 11 p{border-style: solid;} 12 </style> 13 </head> 14 <body> 15 <p class="one"> 边框宽度 2px 边框样式单实线 </p> 16 <p class="two"> 边框宽度上下 3px, 左右 1px 边框样式单实线 </p> 17 <p class="three"> 边框宽度上 3px, 左右 1px, 下 2px 边框样式单实线 </p> 18 </body> 19 </html> 在例 4-3 中, 对 3 个段落应用不同的边框宽度, 然后将边框样式均设置为单实线运行例 4-3, 效果如图 4-7 所示图 4-7 设置边框宽度注意 : 在设置边框宽度时, 必须同时设置边框样式, 如果未设置样式或设置为 none, 则不论宽度设置为多少都无效 (3) 设置边框颜色 (border-color) border-color 属性用于设置边框的颜色, 其取值可为预定义的颜色值十六进制 #RRGGBB 或 RGB 格式 rgb(r,g,b), 实际工作中最常用的是十六进制 #RRGGBB 边框的默认颜色为元素本身的文本颜色, 对于没有文本的元素, 其默认边框颜色为父元素的文本颜色与边框样式和宽度相同, 边框颜色的单边与综合设置如下 : border-top-color: 上边框颜色 ; border-right-color: 右边框颜色 ; border-bottom-color: 下边框颜色 ; 7

border-left-color: 左边框颜色 ; border-color: 上边框颜色 [ 右边框颜色下边框颜色左边框颜色 ]; 综合设置四边颜色必须按顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下下面通过一个案例对边框颜色属性进行演示新建 HTML 页面, 并在页面中添加标题和段落文本, 然

8 border-left-color: 左边框颜色 ; border-color: 上边框颜色 [ 右边框颜色下边框颜色左边框颜色 ]; 综合设置四边颜色必须按顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下下面通过一个案例对边框颜色属性进行演示新建 HTML 页面, 并在页面中添加标题和段落文本, 然后通过边框颜色属性控制标题和段落的边框效果, 如例 4-4 所示例 4-4 example04.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置边框颜色 </title> 7 <style type="text/css"> 8 h2{ 9 border-style:solid; /* 综合设置边框样式 */ 10 border-top-color:#ff0000; /* 单独设置上边框颜色 */ 11 } 12 p{ 13 border-style:solid; /* 综合设置边框样式 */ 14 border-color:#ccc #ff0000; /* 设置边框颜色 : 两个值为上下左右 */ 15 } 16 </style> 17 </head> 18 <body> 19 <h2> 设置边框颜色 </h2> 20 <p> 设置边框颜色 </p> 21 </body> 22 </html> 在例 4-4 中, 使用边框样式 border-color 的单边和综合属性, 设置标题和段落文本的边框颜色样式运行例 4-4, 效果如图 4-8 所示图 4-8 设置边框颜色注意 : 设置边框颜色时同样必须设置边框样式, 如果未设置样式或设置为 none, 则其他的边框属性无效 (4) 综合设置边框 8

9 使用 border-style border-width border-color 虽然可以实现丰富的边框效果, 但是这种方式书写的代码繁琐, 且不便于阅读, 为此 CSS 提供了更简单的边框设置方式, 其基本格式如下 : border: 宽度样式颜色 ; 上面的设置方式中, 宽度样式颜色的顺序不分先后, 可以只指定需要设置的属性, 省略的部分将取默认值 ( 样式不能省略 ) 当每一侧的边框样式都不相同, 或者只需单独定义某一侧的边框时, 可以使用单侧边框的综合属性 border-top border-bottom border-left 或 border-right 进行设置例如单独定义段落的上边框, 代码如下 : p{border-top:2px solid #CCC;} /* 定义上边框, 各个值顺序任意 */ 当四条边的边框样式都相同时, 可以使用 border 属性进行综合设置例如将二级标题的边框设置为双实线红色 3 像素宽, 代码如下 : h2{border:3px double red;} 像 border border-top 等, 能够一个属性定义元素的多种样式, 在 CSS 中称之为复合属性常用的复合属性有 font border margin padding 和 background 等实际工作中常使用复合属性, 它可以简化代码, 提高页面的运行速度为了使读者更好地理解复合属性, 下面对标题和图像分别应用 border 相关的复合属性设置边框, 如例 4-5 所示例 4-5 example05.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 综合设置边框 </title> 7 <style type="text/css"> 8 h2{ 9 border-top:3px dashed #243d52; /* 单侧复合属性设置各边框 */ 10 border-right:10px double #63abe8; 11 border-bottom:5px double #85f2da; 12 border-left:10px solid #1a5fad; 13 } 14.wangye{border:15px solid #4a4c5e;} /*border 复合属性设置各边框相同 */ 15 </style> 16 </head> 17 <body> 18 <h2> 综合设置边框 </h2> 19 <img class="wangye" src="images/pic1.png" alt=" 网页平面设计 " /> 20 </body> 21 </html> 在例 4-5 中, 首先使用边框的单侧复合属性设置二级标题, 使其各侧边框显示不同样式, 然后使用复合属性 border, 为图像设置四条相同的边框运行例 4-5, 效果如图 4-9 所示 9

图 4-9 综合设置边框 2 内边距属性在网页设计中, 为了调整内容在盒子中的显示位置, 常常需要给元素设置内边距, 所谓内边距指的是元素内容与边框之间的距离, 也常常称为内填充在 CSS 中 padding 属性用于设置内边距, 同边框属性 border 一样,padding 也是复合属性, 其相关设置方法如下 : padding-top: 上内边距 ; padding-right:

10 图 4-9 综合设置边框 2 内边距属性在网页设计中, 为了调整内容在盒子中的显示位置, 常常需要给元素设置内边距, 所谓内边距指的是元素内容与边框之间的距离, 也常常称为内填充在 CSS 中 padding 属性用于设置内边距, 同边框属性 border 一样,padding 也是复合属性, 其相关设置方法如下 : padding-top: 上内边距 ; padding-right: 右内边距 ; padding-bottom: 下内边距 ; padding-left: 左内边距 ; padding: 上内边距 [ 右内边距下内边距左内边距 ]; 在上面的设置中,padding 相关属性的取值可为 auto 自动 ( 默认值 ) 不同单位的数值相对于父元素 ( 或浏览器 ) 宽度的百分比 %, 实际工作中最常用的是像素值 (px), 不允许使用负值同边框相关属性一样, 使用复合属性 padding 定义内边距时, 必须按顺时针顺序采用值复制, 一个值为四边两个值为上下 / 左右, 三个值为上 / 左右 / 下下面通过一个案例来演示内边距的用法和效果新建 HTML 页面, 在页面中添加一个图像和一段段落, 然后使用 padding 相关属性, 控制它们的显示位置, 如例 4-6 所示例 4-6 example06.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置内边距 </title> 7 <style type="text/css"> 8.border{border:5px solid #F60;} /* 为图像和段落设置边框 */ 9 img{ 10 padding:80px; /* 图像 4 个方向内边距相同 */ 11 padding-bottom:0; /* 单独设置下内边距 */ 12 } /* 上面两行代码等价于 padding:80px 80px 0;*/ 10

11 13 p{padding:5%;} /* 段落内边距为父元素宽度的 5%*/ 14 </style> 15 </head> 16 <body> 17 <img class="border" src="images/pic2.png" alt="2016 课程马上升级 " /> 18 <p class="border"> 段落内边距为父元素宽度的 5% </p> 19 </body> 20 </html> 在例 4-6 中, 使用 padding 相关属性设置图像和段落的内边距, 其中段落内边距使用 % 数值运行例 4-6, 效果如图 4-10 所示图 4-10 设置内边距由于段落的内边距设置为了 % 数值, 当拖动浏览器窗口改变其宽度时, 段落的内边距会随之发生变化 ( 此时 <p> 标记的父元素为 <body>) 注意 : 如果设置内外边距为百分比, 则不论上下或左右的内外边距, 都是相对于父元素宽度 width 的百分比, 随父元素 width 的变化而变化, 和高度 height 无关 3 外边距属性网页是由多个盒子排列而成的, 要想拉开盒子与盒子之间的距离, 合理地布局网页, 就需要为盒子设置外边距, 所谓外边距指的是元素边框与相邻元素之间的距离在 CSS 中 margin 属性用于设置外边距, 它是一个复合属性, 与内边距 padding 的用法类似, 设置外边距的方法如下 margin-top: 上外边距 ; margin-right: 右外边距 ; margin-bottom: 下外边距 ; margin-left: 左外边距 ; margin: 上外边距 [ 右外边距下外边距左外边距 ]; margin 相关属性的值, 以及复合属性 margin 取 1~4 个值的情况与 padding 相同但是外边距可以使用负值, 使相邻元素重叠 11

12 当对块级元素应用宽度属性 width, 并将左右的外边距都设置为 auto, 可使块级元素水平居中, 实际工作中常用这种方式进行网页布局, 示例代码如下 :.header{width:960px; margin:0 auto;} 下面通过一个案例来演示外边距的用法和效果新建 HTML 页面, 在页面中添加一个图像和一段段落, 然后使用 margin 相关属性, 对图像和段落进行排版, 如例 4-7 所示例 4-7 example07.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置内边距 </title> 7 <style type="text/css"> 8 img{ 9 width:300px; 10 border:5px solid red; 11 float:left; /* 设置图像左浮动 */ 12 margin-right:50px; /* 设置图像的右外边距 */ 13 margin-left:30px; /* 设置图像的左外边距 */ 14 } /* 上面两行代码等价于 margin:0 50px 0 30px;*/ 15 p{ 16 font-size:14px; 17 line-height:26px; 18 text-indent:2em; 19 }</style> 20 </head> 21 <body> 22 <img src="images/pic3.png" alt="2016 全新优化升级课程 " /> 23 <p> 24 前端开发工程师 ( 或者说网页制作网页制作工程师前端制作工程师网站重构工程师 ), 这样的一个职位的主要职责是与交互设计师视觉设计师协作, 根据设计图用 HTML 和 CSS 完成页面制作同时, 在此基础之上, 对完成的页面进行维护和对网站前端性能做相应的优化 25 </p> 26 <p> 27 另外, 一名合格的前端开发工程师, 应该具有一定的审美能力和基础的美工操作能力, 能很好的与交互及视觉设计师协作 28 </p> 29 </body> 30 </html> 在例 4-7 中, 使用浮动属性 float 使图像居左, 同时设置图像的左外边距和右外边距, 使图像和文本之间拉开一定的距离, 实现常见的排版效果 ( 对于浮动, 这里了解即可, 本章后面将会详细讲解 ) 运行例 4-7, 效果如图 4-11 所示 12

清除内边距 */ margin:0; /* 清除外边距 */ } 清除元素默认内外边距后, 网页效果如图 4-12 所示图 4-12 设置外边距 2 通过图 4-12 容易看出, 清除元素默认内边距和外边距样式后, 段落与段落之间,

13 图 4-11 设置外边距 1 在图 4-11 中图像和段落文本之间拉开了一定的距离, 实现了图文混排的效果但是, 段落与段落之间, 浏览器边界与网页内容之间也存在一定的距离, 而我们并没有对 <p> 或 <body> 元素应用内边距或外边距, 可见, 这些元素默认就存在内边距和外边距样式网页中默认就存在内外边距的元素有 <body> <h1>~<h6> <p> 等为了更方便地控制网页中的元素, 制作网页时, 可使用如下代码清除元素的默认内外边距 : *{ padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ } 清除元素默认内外边距后, 网页效果如图 4-12 所示图 4-12 设置外边距 2 通过图 4-12 容易看出, 清除元素默认内边距和外边距样式后, 段落与段落之间, 以及浏览器边界与网页内容之间的距离消失 4 背景属性网页能通过背景图像给读者留下深刻的印象, 如节日题材的网站一般采用喜庆祥和的图片来突出效果, 所以在网页设计中, 合理控制背景颜色和背景图像至关重要下面将详细介绍 CSS 控制背景样式的方法 (1) 设置背景颜色 13

设置背景颜色需通过 background-color 属性实现, 关于该属性在项目 3 的知识拓展中已做详细讲解, 这里不再做具体介绍 (2) 设置背景图像背景不仅可以设置为某种颜色, 在 CSS 中, 还可以将图像作为网页元素的背景, 通过 background-image 属性实现下面, 通过一个案例对 background-image 属性做具体讲解, 如例 4-8 所示例 4-8

14 设置背景颜色需通过 background-color 属性实现, 关于该属性在项目 3 的知识拓展中已做详细讲解, 这里不再做具体介绍 (2) 设置背景图像背景不仅可以设置为某种颜色, 在 CSS 中, 还可以将图像作为网页元素的背景, 通过 background-image 属性实现下面, 通过一个案例对 background-image 属性做具体讲解, 如例 4-8 所示例 4-8 example08.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置背景图像 </title> 7 <style type="text/css"> 8 body{ 9 background-color:#ccc; /* 设置网页的背景颜色 */ 10 background-image:url(images/pic4.png); /* 设置网页的背景图像 */ 11 } 12 h2{ 13 font-family:" 微软雅黑 "; 14 color:#fff; 15 background-color:#56cbf6; /* 设置标题的背景颜色 */ 16 } 17 </style> 18 </head> 19 <body> 20 <h2>ui 设计前景超乎想象 </h2> 21 <p> 互联网 + 与 O2O 模式的大趋势, 使平面设计网页设计 UI 设计 Web 前端的前景广阔超乎想象 </p> 22 </body> 23 </html> 保存 HTML 页面, 刷新网页, 效果如图 4-14 所示图 4-13 准备的背景图像图 4-14 设置网页的背景图像在图 4-14 中, 背景图像自动沿着水平和竖直两个方向平铺, 充满整个网页, 并且覆盖了 <body> 的背景颜色 (3) 设置背景图像平铺 14

默认情况下, 背景图像会自动向水平和竖直两个方向平铺, 如图 4-14 所示如果不希望背景图像平铺, 或者只沿着一个方向平铺, 可以通过 background-repeat 属性来控制, 该属性的取值如下 : repeat: 沿水平和竖直两个方向平铺 ( 默认值 ) no-repeat: 不平铺 ( 图像位于元素的左上角, 只显示一次 ) repeat-x: 只沿水平方向平铺

15 默认情况下, 背景图像会自动向水平和竖直两个方向平铺, 如图 4-14 所示如果不希望背景图像平铺, 或者只沿着一个方向平铺, 可以通过 background-repeat 属性来控制, 该属性的取值如下 : repeat: 沿水平和竖直两个方向平铺 ( 默认值 ) no-repeat: 不平铺 ( 图像位于元素的左上角, 只显示一次 ) repeat-x: 只沿水平方向平铺 repeat-y: 只沿竖直方向平铺例如, 希望上面例子中的图像只沿着水平方向平铺, 可以将 body 元素的 CSS 代码更改如下 : body{ background-color:#ccc; /* 设置网页的背景颜色 */ background-image:url(images/pic4.png); /* 设置网页的背景图像 */ background-repeat:repeat-x; /* 设置背景图像的平铺 */ } 保存 HTML 页面, 刷新网页, 效果如图 4-15 所示图 4-15 设置背景图像水平平铺在图 4-15 中, 图像只沿着水平方向平铺, 背景图像覆盖的区域就显示背景图像, 背景图像没有覆盖的区域按照设置的背景颜色显示也就是说当背景图像和背景颜色同时存在时, 背景图像优先显示 (4) 设置背景图像的位置如果将背景图像的平铺属性 background-repeat 定义为 no-repeat, 图像将显示在元素的左上角, 如例 4-9 所示例 4-9 example09.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 设置背景图像的位置 </title> 7 <style type="text/css"> 8 body{ 9 background-image:url(images/pic5.png); /* 设置网页的背景图像 */ 10 background-repeat:no-repeat; /* 设置背景图像不平铺 */ 11 } 12 </style> 13 </head> 14 <body> 15 <h2> UI 设计培养如此全能的人才 </h2> 15

16 <p> UI 设计培训课程非常系统全面, 从软件操作理论知识实战练习就业指导等方面设置都很科学完善, 只要跟着老师的节奏来, 哪怕零基础学员也不会有任何影响针对学员的基础情况, 我们分为基础班和就业班两种班型分开学习 </p> 17 </body> 18 </html> 在例 4-9 中, 将主体元素 <body> 的背景图像定义为 no-repeat 不平铺在浏览器中运行,

16 16 <p> UI 设计培训课程非常系统全面, 从软件操作理论知识实战练习就业指导等方面设置都很科学完善, 只要跟着老师的节奏来, 哪怕零基础学员也不会有任何影响针对学员的基础情况, 我们分为基础班和就业班两种班型分开学习 </p> 17 </body> 18 </html> 在例 4-9 中, 将主体元素 <body> 的背景图像定义为 no-repeat 不平铺在浏览器中运行, 效果如图 4-16 所示, 背景图像位于 HTML 页面的左上角, 即 <body> 元素的左上角图 4-16 背景图像不平铺图 4-17 背景图像在右下角如果希望背景图像出现在其他位置, 就需要另一个 CSS 属性 background-position, 设置背景图像的位置例如, 将例 4-9 中的背景图像定义在页面的右下角, 可以更改 body 元素的 CSS 样式代码 : body{ background-image:url(images/pic5.png); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:right bottom; /* 设置背景图像的位置 */ } 保存 HTML 文件, 刷新网页, 效果如图 4-17 所示, 背景图像出现在页面的右下角在 CSS 中,background-position 属性的值通常设置为两个, 中间用空格隔开, 用于定义背景图像在元素的水平和垂直方向的坐标, 例如上面的 right bottom background-position 属性的默认值为 0 0 或 top left, 即背景图像位于元素的左上角 background-position 属性的取值有多种, 具体如下 : a) 使用不同单位 ( 最常用的是像素 px) 的数值 : 直接设置图像左上角在元素中的坐标, 例如 background-position:20px 20px; b) 使用预定义的关键字 : 指定背景图像在元素中的对齐方式水平方向值 :left center right 垂直方向值 :top center bottom 两个关键字的顺序任意, 若只有一个值则另一个默认为 center 例如: center 相当于 center center( 居中显示 ) top 相当于 top center 或 center top( 水平居中且上对齐 ) c) 使用百分比 : 按背景图像和元素的指定点对齐 0% 0%: 表示图像左上角与元素的左上角对齐 50% 50%: 表示图像 50% 50% 中心点与元素 50% 50% 的中心点对齐 20% 30%: 表示图像 20% 30% 的点与元素 20% 30% 的点对齐 100% 100%: 表示图像右下角与元素的右下角对齐, 而不是图像充满元素如果只有一个百分数, 将作为水平值, 垂直值则默认为 50% 16

50px, 距离上边缘为 80px (5) 设置背景图像固定在网页上设置背景图像时, 随着页面滚动条的移动, 背景图像也会跟着一起移动, 如图 4-19 所示图 4-19 背景图像随着页面一起移动如果希望背景图像固定在屏幕上, 不随着页面元素滚动, 可以使用 background-attachment 属性来设置, 其属性值如下 : scroll: 图像随页面元素一起滚动 ( 默认值 )

17 接下来将 background-position 的值定义为像素值, 来控制例 4-9 中背景图像的位置,body 元素的 CSS 样式代码如下 : body{ background-image:url(images/pic5.png); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ } 保存 HTML 页面, 再次刷新网页, 效果如图 4-18 所示图 4-18 控制背景图像的位置在图 4-18 中, 图像距离 body 元素的左边缘为 50px, 距离上边缘为 80px (5) 设置背景图像固定在网页上设置背景图像时, 随着页面滚动条的移动, 背景图像也会跟着一起移动, 如图 4-19 所示图 4-19 背景图像随着页面一起移动如果希望背景图像固定在屏幕上, 不随着页面元素滚动, 可以使用 background-attachment 属性来设置, 其属性值如下 : scroll: 图像随页面元素一起滚动 ( 默认值 ) fixed: 图像固定在屏幕上, 不随页面元素滚动下面控制例 4-9 中的背景图像, 使其固定在屏幕上,body 元素的 CSS 样式代码如下 : body{ background-image:url(images/pic5.png); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ } background-attachment:fixed; /* 设置背景图像的位置固定 */ 17

这时运行例 4-9, 效果如图 4-20 所示图 4-20 设置背景图像固定在图 4-20 所示的页面中, 无论如何拖动浏览器的滚动条, 背景图像的位置都固定不变 (6) 综合设置元素的背景同边框属性一样, 在 CSS 中背景属性也是一个复合属性, 可以将背景相关的样式都综合定义在一个复合属性 background 中使用 background 属性综合设置背景样式的语法格式如下 :

png) no-repeat 50px 80px fixed; 这时省略了背景颜色样式, 等价于 : body{ background-image:url(images/pic5.

18 这时运行例 4-9, 效果如图 4-20 所示图 4-20 设置背景图像固定在图 4-20 所示的页面中, 无论如何拖动浏览器的滚动条, 背景图像的位置都固定不变 (6) 综合设置元素的背景同边框属性一样, 在 CSS 中背景属性也是一个复合属性, 可以将背景相关的样式都综合定义在一个复合属性 background 中使用 background 属性综合设置背景样式的语法格式如下 : background: 背景色 url(" 图像 ") 平铺定位固定 ; 在上述语法格式中, 各个样式顺序任意, 中间用空格隔开, 不需要的样式可以省略但实际工作中通常按照背景色 url(" 图像 ") 平铺定位固定的顺序来书写例如, 例 4-9 中 <body> 的背景可以综合设置为 : background:url(images/pic5.png) no-repeat 50px 80px fixed; 这时省略了背景颜色样式, 等价于 : body{ background-image:url(images/pic5.png); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ } background-attachment:fixed; /* 设置背景图像的位置固定 */ 5 盒子的宽与高网页是由多个盒子排列而成的, 每个盒子都有固定的大小, 在 CSS 中使用宽度属性 width 和高度属性 height 可以对盒子的大小进行控制 width 和 height 的属性值可以为不同单位的数值或相对于父元素的百分比, 实际工作中最常用的是像素值下面通过 width 和 height 属性来控制网页中的段落文本, 如例 4-10 所示例 4-10 example10.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 盒子模型的宽度与高度 </title> 7 <style type="text/css"> 8.box{ 9 width:200px; /* 设置段落的宽度 */ 10 height:50px; /* 设置段落的高度 */ 18

11 background:#ccc; /* 设置段落的背景颜色 */ 12 border:10px solid #f00; /* 设置段落的边框 */ 13 padding:15px; /* 设置段落的内边距 */ 14 margin:15px; /* 设置段落的外边距 */ 15 } 16 </style> 17 </head> 18 <body> 19 <p class="box">

19 11 background:#ccc; /* 设置段落的背景颜色 */ 12 border:10px solid #f00; /* 设置段落的边框 */ 13 padding:15px; /* 设置段落的内边距 */ 14 margin:15px; /* 设置段落的外边距 */ 15 } 16 </style> 17 </head> 18 <body> 19 <p class="box"> 盒子模型的宽度与高度 </p> 20 </body> 21 </html> 在例 4-10 中, 通过 width 和 height 属性分别控制段落的宽度和高度, 同时对段落应用了盒子模型的其他相关属性, 例如边框内边距外边距等运行例 4-10, 效果如图 4-21 所示图 4-21 控制盒子的宽度与高度在例 4-10 所示的盒子中, 如果问盒子的宽度是多少, 读者可能会不假思索地说是 200px 实际上这是不正确的, 因为 CSS 规范中, 元素的 width 和 height 属性仅指块级元素内容的宽度和高度, 其周围的内边距边框和外边距是另外计算的大多数浏览器都采用了 W3C 规范, 符合 CSS 规范的盒子模型的总宽度和总高度的计算原则是 : 盒子的总宽度 = width+ 左右内边距之和 + 左右边框宽度之和 + 左右外边距之和盒子的总高度 = height+ 上下内边距之和 + 上下边框宽度之和 + 上下外边距之和注意 : 宽度属性 width 和高度属性 height 仅适用于块级元素, 对行内元素无效 (<img /> 和 <input /> 标记除外 ) 任务 4-3 元素的类型与转换需求分析在前面的项目章节中介绍 CSS 属性时, 经常会提到仅适用于块级元素, 那么究竟什么是块级元素, 在 HTML 标记语言中元素又是如何分类的呢? 下面将对元素的类型与转换进行详细讲解 19

20 知识储备 1 元素的类型 HTML 标记被定义成了不同的类型, 一般分为块标记和行内标记, 也称块元素和行内元素通过学习它们的特性可以为使用 CSS 设置样式和布局打下基础, 具体如下 : (1) 块元素块元素在页面中以区域块的形式出现, 其特点是 : 独自占据一整行或多行 ; 可对其设置宽度高度对齐等属性 ; 可以容纳行内元素和其他块元素常见的块元素有 <h1>~<h6> <p> <div> <ul> <ol> <li> 等, 其中 <div> 标记是最典型的块元素 (2) 行内元素行内元素也称内联元素或内嵌元素, 其特点是 : 和其它行内元素都在同一行上显示, 不会独自换行 ; 宽度就是它的文字或图片的宽度, 默认不可改变 ; 设置高度 height 无效, 可以通过 line-height 来设置 ; 设置 margin 只有左右 margin 有效, 上下无效 ; 设置 padding 只有左右 padding 有效, 上下则无效 ; 只能容纳文本或者其它行内元素注意 : 这里说的无效是指对其他元素的排列没有影响也就是说, 设置了 margin 和 padding 的行内元素与其相邻的其他元素间, 不会因为上下 margin 或者上下 padding 而产生间距但是就其本身而言, 上下 margin 与 padding 是有效的读者可动手自己体验下, 就一目了然了常见的行内元素有 <strong> <b> <em> <i> <del> <s> <ins> <u> <a> <span> 等, 其中 <span> 标记最典型的行内元素下面通过一个案例来进一步认识块元素与行内元素, 如例 4-11 所示例 4-11 example11.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 块元素和行内元素 </title> 7 <style type="text/css"> 8 h2{ /* 定义 h2 的背景颜色宽度高度文本水平对齐方式 */ 9 background:#909; 10 width:300px; 11 height:50px; 12 text-align:center; 13 } 14 p{background:#790;} /* 定义 p 的背景颜色 */ 15 b{ /* 定义 b 的背景颜色宽度高度文本水平对齐方式 */ 16 background:#fcc; 20

17 width:300px; 18 height:50px; 19 text-align:center; 20 } 21 span{background:#ff0;} /* 定义 span 的背景颜色 */ 22 </style> 23 </head> 24 <body> 25 <h2> 标题标记 </h2> 26 <p> 段落标记 </p> 27 <b>b 标记 </b> 28

21 17 width:300px; 18 height:50px; 19 text-align:center; 20 } 21 span{background:#ff0;} /* 定义 span 的背景颜色 */ 22 </style> 23 </head> 24 <body> 25 <h2> 标题标记 </h2> 26 <p> 段落标记 </p> 27 <b>b 标记 </b> 28 <span>span 标记 </span> 29 </body> 30 </html> 在例 4-11 中, 首先使用块标记 <h2> <p> 和行内标记 <b> <span> 定义文本, 然后对它们应用不同的背景颜色, 同时, 对 <h2> 和 <b> 应用相同的宽度高度和对齐属性运行例 4-11, 效果如图 4-22 所示图 4-22 块元素和行内元素的显示效果从图 4-22 可以看出, 不同类型的元素在页面中所占的区域不同块元素 <h2> 和 <p> 各自占据一个矩形的区域, 虽然 <h2> 和 <p> 相邻, 但是它们不会排在同一行中, 而是依次竖直排列, 其中, 设置了宽高和对齐属性的 <h2> 按设置的样式显示, 未设置宽高和对齐属性的 <p> 则左右撑满页面而行内元素 <b> 和 <span> 排列在同一行显示, 虽然对 <b> 设置了和 <h2> 相同的宽高和对齐属性, 但是在实际的显示效果中并未生效值得一提的是, 行内元素可以嵌套在块元素中使用, 而块元素却不能嵌套在行内元素中例如, 可以将例 4-11 中的 <b> 和 <span> 嵌套在 <p> 标记中, 代码如下 : <p> <b>b 标记 </b> <span>span 标记 </span> </p> 保存 HTML 文件, 刷新网页, 效果如图 4-23 所示 21

图 4-23 行内元素嵌套在块元素中从图 4-23 可以看出, 当行内元素嵌套在块元素中时, 就会在块元素上占据一定的范围, 成为块元素的一部分注意 : 在行内元素中有几个特殊的标记 <img /> 和 <input />, 可以对它们设置宽高和对齐属性, 有些资料可能会称它们为行内块元素 2 <span> 标记 <span> 在 CSS 定义中属于一个行内元素,<span> 与

22 图 4-23 行内元素嵌套在块元素中从图 4-23 可以看出, 当行内元素嵌套在块元素中时, 就会在块元素上占据一定的范围, 成为块元素的一部分注意 : 在行内元素中有几个特殊的标记 <img /> 和 <input />, 可以对它们设置宽高和对齐属性, 有些资料可能会称它们为行内块元素 2 <span> 标记 <span> 在 CSS 定义中属于一个行内元素,<span> 与 </span> 之间只能包含文本和各种行内标记 <span> 标记没有固定的表现形式, 通常可配合 class 属性使用, 当对它应用样式时, 才会产生视觉上的变化与 <div> 元素相比, 通常可能通俗地理解为 <div> 为大容器,<span> 为小容器, 大容器内可以放置小容器下面通过一个案例来具体演示 <span> 标记的使用, 如例 4-12 所示例 4-12 example12.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title>span 标记 </title> 7 <style type="text/css"> 8 span{margin:10px;} /* 定义 span 的外边距 */ 9.one{color:red;} 10.two{color:pink;} 11.three{color:blue;} 12.four{color:purple;} 13.five{color:green;} 14 </style> 15 </head> 16 <body> 17 <h2> 传智播客课程推荐 </h2> 18 <div class="list"> 19 <span class="one">ui 设计 </span><span class="two">java</span><span class="three"> 安卓 </span><span class="four">ios</span><span class="five"> 前端移动与开发 </span> 20 </div> 22

21 </body> 22 </html> 在例 4-12 中, 通过在 <div> 标记中嵌套 <span> 标记, 来定义一些特殊显示的文本, 然后使用 CSS 分别设置它们的样式运行例 4-12, 效果如图 4-24 所示图 4-24 span 标记的使用在图 4-24 中的所有课程, 都是通过 CSS 控制 <span> 标记设置的由此可以看出,<span> 标记可以嵌套于

23 21 </body> 22 </html> 在例 4-12 中, 通过在 <div> 标记中嵌套 <span> 标记, 来定义一些特殊显示的文本, 然后使用 CSS 分别设置它们的样式运行例 4-12, 效果如图 4-24 所示图 4-24 span 标记的使用在图 4-24 中的所有课程, 都是通过 CSS 控制 <span> 标记设置的由此可以看出,<span> 标记可以嵌套于 <div> 标记中, 成为它的子元素, 但是反过来则不成立, 即 <span> 标记中不能嵌套 <div> 标记从 <div> 和 <span> 之间的区别和联系, 可以更深刻的理解块元素和行内元素 3 元素的转换通过前面的学习, 可知元素分为块元素和行内元素在具体使用时, 可根据实际情况通过 display 属性实现块元素与行内元素间的转换,display 属性的属性值如表 4-2 所示表 4-2 display 属性的属性值属性值含义 inline 此元素将显示为行内元素 ( 行内元素默认的 display 属性值 ) block 此元素将显示为块元素 ( 块元素默认的 display 属性值 ) inline-block 此元素将显示为行内块元素, 可以对其设置宽高和对齐等属性, 但是该元素不会独占一行 none 此元素将被隐藏, 不显示, 也不占用页面空间, 相当于该元素不存在下面通过一个案例来演示 display 属性的用法和效果, 如例 4-13 所示例 4-13 example13.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 元素的转换 </title> 7 <style type="text/css"> 8 div{ /* 设置 div 的宽高 */ 9 width:180px; 10 height:175px; 11 } 12 span{ /* 设置 span 的宽高 */ 13 width:180px; 23

24 14 height:175px; 15 } 16 p{font-size: 20px;} 17.spring{background: url(images/spring.jpg);} 18.summer{background: url(images/summer.jpg);} 19.autumn{background: url(images/autumn.jpg);} 20.winter{background: url(images/winter.jpg);} 21 </style> 22 </head> 23 <body> 24 <p>div 部分 </p> 25 <div class="spring"></div> 26 <div class="summer"></div> 27 <div class="autumn"></div> 28 <div class="winter"></div> 29 <p>span 部分 </p> 30 <span class="spring"></span> 31 <span class="summer"></span> 32 <span class="autumn"></span> 33 <span class="winter"></span> 34 </body> 35 </html> 在例 4-13 中, 定义了 4 个 <div> 和 4 个 <span>, 然后对 <div> 和 <span> 设置相同的宽高, 最后为类名相同的 <div> 和 <span> 分别添加相同的背景样式运行例 4-13, 效果如图 4-25 所示 24

25 图 4-25 元素的转换 1 通过图 4-25 可以看出,span 部分的背景图片并未显示原因是 <span> 标记为行内元素, 设置的宽高样式对其不起作用, 修改 span 的样式代码, 具体如下 : span{ width:180px; height:175px; display:inline-block; /* 将其转换为行内块元素 */ } 保存后, 刷新页面, 效果如图 4-26 所示 25

26 图 4-26 元素的转换 2 在图 4-26 中,span 部分的背景图片正常显示, 且排列在同一行显示同样, 可修改 div 的样式代码, 也将其转换为行内块元素, 且排列在同一行显示具体如下 : div{ width:180px; height:175px; display:inline-block; /* 将其转换为行内块 */ } 保存后, 刷新页面, 效果如图 4-27 所示 26

height:175px; display:inline; /* 将其转为行内元素 */ } 保存后, 刷新页面, 效果如图 4-28 所示图

27 图 4-27 元素的转换 3 在图 4-27 中可以看出, 将 <div> 和 <span> 标记都转换为行内块元素后, 两部分的显示效果相同由于元素间的转换是相互的, 因此可继续修改 div 的样式代码将其转换为行内元素具体如下 : div{ width:180px; height:175px; display:inline; /* 将其转为行内元素 */ } 保存后, 刷新页面, 效果如图 4-28 所示图 4-28 元素的转换 4 在图 4-28 中,div 部分的图片未显示, 原因是将 <div> 元素转换为行内元素后, 宽高属性将对其不再起作用, 因此背景图片无法显示 27

28 知识拓展 1 块元素垂直外边距的合并垂直外边距合并指的是, 当两个垂直外边距相遇时, 它们将形成一个外边距合并后的外边距等于两个发生合并的外边距中的较大者垂直外边距的合并被分为两类, 分别为相邻块元素垂直外边距的合并和嵌套块元素垂直外边距的合并, 下面针对这两种情况做具体分析 (1) 相邻块元素垂直外边距的合并当垂直方向两个块元素相遇时, 如果上面的元素有下外边距, 下面的元素有上外边距时, 它们之间的垂直距离是较大的那个外边距, 而不是两者之和下面通过一个案例来演示相邻块元素垂直外边距的合并, 如例 4-14 所示例 4-14 example14.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 相邻块元素垂直外边距的合并 </title> 7 <style type="text/css"> 8 div{ 9 width:100px; 10 height:50px; 11 } 12.first{ 13 margin-bottom:20px; 14 background:pink; 15 } 16.second{ 17 margin-top:30px; 18 background:yellow; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="first"> 上 </div> 24 <div class="second"> 下 </div> 25 </body> 26 </html> 在例 4-14 中, 分别为两个 <div> 设置了相同的宽高和不同的背景颜色, 并为上面的盒子定义下外边距, 为下面的盒子定义上外边距运行例 4-14, 效果如图 4-29 所示 28

图 4-29 相邻块元素垂直外边距的合并在图 4-29 中可以看出, 两个元素间的垂直距离不等于两个元素外边距之和 ( 即元素的高 ), 而是小于外边距之和, 通过使用测量工具测量可以发现, 两个元素的垂直距离为 30px, 也就是两个元素的外边距中的较大者 (2) 嵌套块元素垂直外边距的合并对于父元素中嵌套子元素的情况, 如果未对父元素设置上内边距及边框,

29 图 4-29 相邻块元素垂直外边距的合并在图 4-29 中可以看出, 两个元素间的垂直距离不等于两个元素外边距之和 ( 即元素的高 ), 而是小于外边距之和, 通过使用测量工具测量可以发现, 两个元素的垂直距离为 30px, 也就是两个元素的外边距中的较大者 (2) 嵌套块元素垂直外边距的合并对于父元素中嵌套子元素的情况, 如果未对父元素设置上内边距及边框, 则父元素的上外边距会与子元素的上外边距发生合并, 合并后的外边距为两者中的较大者下面通过一个案例来演示嵌套块元素垂直外边距的合并, 如例 4-15 所示例 4-15 example15.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 嵌套块元素垂直外边距的合并 </title> 7 <style type="text/css"> 8.first{ 9 width:200px; 10 height:100px; 11 margin-top:20px; 12 background: pink; 13 } 14.second{ 15 width:100px; 16 height:50px; 17 margin-top: 50px; 18 background: yellow; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="first"> 24 <div class="second"></div> 25 </div> 26 </body> 29

27 </html> 在例 4-15 中, 分别为两个 div 设置了不同的宽高和背景颜色, 并定义了不同的上外边距运行例 4-15, 效果如图 4-30 所示图 4-30 嵌套块元素垂直外边距的合并 1 在图 4-30 中可以看出, 父元素与子元素的上边缘重合, 如果使用测量工具测量后可以发现, 此时的外边距为 50px,

图 4-31 嵌套块元素垂直外边距的合并 2 在图 4-31 中, 父 <div> 与浏览器上边缘的垂直间距为 20px, 子 <div> 与父 <div> 上边缘的垂直间距为 50px, 也就是说这时外边距正常显示, 没有发生合并需要注意的是, 在上图中, 边框颜色和父 <div> 的背景颜色一样, 所以在实际显示效果中好像边框不存在一样

30 27 </html> 在例 4-15 中, 分别为两个 div 设置了不同的宽高和背景颜色, 并定义了不同的上外边距运行例 4-15, 效果如图 4-30 所示图 4-30 嵌套块元素垂直外边距的合并 1 在图 4-30 中可以看出, 父元素与子元素的上边缘重合, 如果使用测量工具测量后可以发现, 此时的外边距为 50px, 也就是父元素与子元素外边距中的较大者如果希望外边距不合并, 可以为父元素定义 1 像素的上边框或上内边距这里以定义父元素的上边框为例, 在父 <div> 的 CSS 样式中增加如下代码 : border-top:1px solid pink; /* 定义父 div 的上边框 */ 保存 HTML 文件, 刷新网页, 效果如图 4-31 所示图 4-31 嵌套块元素垂直外边距的合并 2 在图 4-31 中, 父 <div> 与浏览器上边缘的垂直间距为 20px, 子 <div> 与父 <div> 上边缘的垂直间距为 50px, 也就是说这时外边距正常显示, 没有发生合并需要注意的是, 在上图中, 边框颜色和父 <div> 的背景颜色一样, 所以在实际显示效果中好像边框不存在一样任务 4-4 元素的浮动需求分析在网页中, 文档流是以默认的方向即从上到下从左往右流动的, 如果是行内元素, 当创建完一个元素后, 可在其右侧继续创建其它元素 ; 对于块元素而言, 在创建完一个元素后, 会在其下方继续创建其它元素通常, 采用这种默认的文档流搭建的结构看起来死板不美观, 达不到预期的效果通过引入 CSS 中的浮动样式可以进行更多样化的布局 30

31 知识储备 1 元素的浮动属性在 CSS 中, 通过 float 属性来定义浮动, 所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制, 移动到其父元素中指定位置的过程其基本语法格式如下 : 选择器 {float: 属性值 ;} 常用的 float 属性值及含义为 : left: 对象居左浮动, 文本流向对象的右侧 right: 对象居右浮动, 文本流向对象的左侧 none: 对象不浮动, 该值为默认值下面通过一个案例来学习 float 属性的用法, 如例 4-16 所示例 4-16 example16.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 浮动的应用 </title> 7 <style type="text/css"> 8.one{ 9 width:100px; 10 height:100px; 11 background:pink; 12 } 13.two{ 14 width:150px; 15 height:150px; 16 background:red; 17 } 18.three{ 19 width:200px; 20 height:200px; 21 background:blue; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="one"></div> 27 <div class="two"></div> 28 <div class="three"></div> 29 </body> 30 </html> 在例 4-16 中, 分别为三个 <div> 设置了不同的宽高和背景颜色 31

运行例 4-16, 效果如图 4-32 所示图 4-32 浮动的应用 1 图 4-32 为未添加浮动属性前的布局样式, 三个盒子依次由上而下排列, 符合标准流的布局效果接下来, 修改第一个盒子的样式代码, 为其添加左浮动样式, 具体代码如下 : float:left; 保存 HTML 文件后, 刷新页面, 效果如图 4-33 所示

32 运行例 4-16, 效果如图 4-32 所示图 4-32 浮动的应用 1 图 4-32 为未添加浮动属性前的布局样式, 三个盒子依次由上而下排列, 符合标准流的布局效果接下来, 修改第一个盒子的样式代码, 为其添加左浮动样式, 具体代码如下 : float:left; 保存 HTML 文件后, 刷新页面, 效果如图 4-33 所示图 4-33 浮动的应用 2 在图 4-33 中可以看出, 由于为第一个盒子设置了左浮动样式, 因此使其脱离标准文档流, 其后的元素会自动向上流, 直到上边缘与第一个盒子重合接下来, 修改第二个盒子的样式代码为其添加左浮动样式, 具体代码如下 : float:left; 保存 HTML 文件后, 刷新页面, 效果如图 4-34 所示 32

图 4-34 浮动的应用 3 在图 4-34 中可以看出, 第二个浮动的盒子排列到了第一个盒子的右侧,

修改第三个盒子的样式代码为其添加左浮动样式, 具体代码如下 : float:left; 保存 HTML 文件后, 刷新页面,

第三个盒子没有移动到第二个盒子的右侧, 原因是第二个盒子右侧所预留的空间不能够满足第三个盒子的宽度, 此时,

33 图 4-34 浮动的应用 3 在图 4-34 中可以看出, 第二个浮动的盒子排列到了第一个盒子的右侧, 与第一个盒子在同一行显示, 且都脱离了标准文档流, 第三个盒子自动向上流, 直到上边缘与第一个盒子重合接下来, 修改第三个盒子的样式代码为其添加左浮动样式, 具体代码如下 : float:left; 保存 HTML 文件后, 刷新页面, 效果如图 4-35 所示图 4-35 浮动的应用 4 观察效果图 4-35, 发现与预期效果有所不同, 第三个盒子没有移动到第二个盒子的右侧, 原因是第二个盒子右侧所预留的空间不能够满足第三个盒子的宽度, 此时, 浮动的盒子会自动换行到下方显示拖动浏览器窗口的宽度后, 效果如图 4-36 所示图 4-36 浮动的应用 5 在图 4-36 中, 三个盒子在同一行显示, 且依次从左向右排列, 脱离了标准流从上到下的排列方式 33

34 2 清除浮动在网页中, 当一个元素被设为浮动后, 就不再占用原文档流的位置, 与该元素相邻的其他元素, 会受浮动的影响, 产生位置上的变化这时, 如果要避免浮动对其他元素的影响, 就需要清除浮动在 CSS 中, 使用 clear 属性清除浮动, 其基本语法格式如下 : 选择器 {clear: 属性值 ;} 常用的 clear 属性值及含义为 : left: 清除左侧浮动的影响 right: 清除右侧浮动的影响 none: 不清除浮动, 该值为默认值 both: 同时清除左右两侧浮动的影响下面通过一个案例来学习 clear 属性的用法, 如例 4-17 所示例 4-17 example17.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 清除浮动的应用 </title> 7 <style type="text/css"> 8 div{float:left;} 9 </style> 10 </head> 11 <body> 12 <div><img src="images/11.jpg"/></div> 13 <div><img src="images/22.jpg"/></div> 14 <div><img src="images/33.jpg"/></div> 15 <p> 水墨画 : 由水和墨经过调配水和墨的浓度所画出的画, 是绘画的一种形式, 更多时候, 水墨画被视为中国传统绘画, 也就是国画的代表也称国画, 中国画基本的水墨画, 仅有水与墨, 黑与白色, 但进阶的水墨画, 也有工笔花鸟画, 色彩缤纷后者有时也称为彩墨画 </p> 16 </body> 17 </html> 在例 4-17 中, 为三个 <div> 分别插入一张图片, 并设置其左浮动, 最后添加 <p> 标记定义一段文字运行例 4-17, 效果如图 4-37 所示 34

图 4-37 清除浮动前效果展示在图 4-37 中, 由于为 <div> 设置了左浮动, 因此, 段落标记会围绕图片显示如果想让段落文本不受浮动元素的影响, 则需通过清除浮动实现, 为 <p> 标记添加样式代码, 具体如下 : p{clear: left;} 保存 HTML 文件后, 刷新页面, 效果如图 4-38 所示图 4-38 清除浮动后效果展示通过图

4-18 所示例 4-18 example18.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

35 图 4-37 清除浮动前效果展示在图 4-37 中, 由于为 <div> 设置了左浮动, 因此, 段落标记会围绕图片显示如果想让段落文本不受浮动元素的影响, 则需通过清除浮动实现, 为 <p> 标记添加样式代码, 具体如下 : p{clear: left;} 保存 HTML 文件后, 刷新页面, 效果如图 4-38 所示图 4-38 清除浮动后效果展示通过图 4-38 可以看出, 清除段落文本左侧的浮动后, 段落文本不再受到浮动元素的影响, 而是按照元素自身的默认排列方式, 独自占据一个区域, 显示在图片下方需要注意的是,clear 属性只能清除元素左右两侧浮动的影响然而在制作网页时, 经常会遇到一些特殊的浮动影响, 例如, 对子元素设置浮动时, 如果不对其父元素定义高度, 则子元素的浮动会对父元素产生影响, 如例 4-18 所示例 4-18 example18.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 子元素浮动对父元素的影响 </title> 7 <style type="text/css"> 8.one,.two,.three{ 9 float:left; 35

36 10 width:100px; 11 height:100px; 12 margin:10px; 13 background: red; 14 } 15.box{ 16 border:1px solid #ccc; 17 background: blue; 18 } 19 </style> 20 </head> 21 <body> 22 <div> 23 <div class="box"> 24 <div class="one">div1</div> 25 <div class="two">div2</div> 26 <div class="three">div3</div> 27 </div> 28 </div> 29 </body> 30 </html> 在例 4-18 中, 为 div1 div2 div3 三个子盒子定义左浮动, 同时, 不给其父元素设置高度运行例 4-18, 效果如图 4-39 所示图 4-39 子元素浮动对父元素的影响在图 4-39 中, 由于受到子元素浮动的影响, 没有设置高度的父元素变成了一条直线, 即父元素不能自适应子元素的高度了我们知道子元素和父元素为嵌套关系, 不存在左右位置, 所以使用 clear 属性并不能清除子元素浮动对父元素的影响那么对于这种情况该如何清除浮动呢? 为了使读者在以后的工作中, 能够轻松地清除一些特殊的浮动影响, 下面总结了常用的三种清除浮动的方法 : 方法一 : 使用空标记清除浮动在浮动元素之后添加空标记, 并对该标记应用 clear:both 样式, 可清除元素浮动所产生的影响, 在例 4-18 的基础上, 演示使用空标记清除浮动的方法, 具体代码如例 4-19 所示例 4-19 example19.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 36

37 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 空标记清除浮动 </title> 7 <style type="text/css"> 8.one,.two,.three{ 9 float:left; 10 width:100px; 11 height:100px; 12 margin:10px; 13 background: red; 14 } 15.box{ 16 border:1px solid #ccc; 17 background: blue; 18 } 19.four{clear:both;} 20 </style> 21 </head> 22 <body> 23 <div> 24 <div class="box"> 25 <div class="one">div1</div> 26 <div class="two">div2</div> 27 <div class="three">div3</div> 28 <div class="four"></div> 29 </div> 30 </div> 31 </body> 32 </html> 在例 4-19 中, 在浮动元素 div1 div2 div3 之后添加 class 为 four 的空 <div> 标记, 然后对其应用 clear:both; 样式运行例 4-19, 效果如图 4-40 所示图 4-40 空标记清除浮动 37

38 在图 4-40 中, 父元素被其子元素撑开了, 即子元素的浮动对父元素的影响已经不存在不足的是, 增加了不必要的结构元素方法二 : 使用 overflow 属性清除浮动给浮动元素的父元素添加 overflow:hidden; 或 overflow:auto; 可以清除浮动, 该方法弥补了空标记清除浮动的不足下面继续在例 4-18 的基础上, 演示使用 overflow 属性清除浮动的方法, 如例 4-20 所示例 4-20 example20.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title>overflow 属性清除浮动 </title> 7 <style type="text/css"> 8.one,.two,.three{ 9 float:left; 10 width:100px; 11 height:100px; 12 margin:10px; 13 background:red; 14 } 15.box{ 16 border:1px solid #ccc; 17 background:blue; 18 overflow:hidden; 19 } 20 </style> 21 </head> 22 <body> 23 <div> 24 <div class="box"> 25 <div class="one">div1</div> 26 <div class="two">div2</div> 27 <div class="three">div3</div> 28 </div> 29 </div> 30 </body> 31 </html> 在例 4-20 中, 对父元素应用 overflow:hidden; 样式, 来清除子元素浮动对父元素的影响运行例 4-20, 效果如图 4-41 所示 38

图 4-41 overflow 属性清除浮动在图 4-41 中, 父元素被其子元素撑开了, 达到了预期的效果方法三 : 使用 after 伪对象清除浮动其实现原理类似于第一种方法, 只是区别在于前者是在结构中插入一个空标记, 而后者利用其伪类 :after 在元素内部增加一个类似于空标记的效果使用 after 伪对象清除浮动时需要注意以下两点 : (1) 必须为需要清除浮动的元素伪对象设置

39 图 4-41 overflow 属性清除浮动在图 4-41 中, 父元素被其子元素撑开了, 达到了预期的效果方法三 : 使用 after 伪对象清除浮动其实现原理类似于第一种方法, 只是区别在于前者是在结构中插入一个空标记, 而后者利用其伪类 :after 在元素内部增加一个类似于空标记的效果使用 after 伪对象清除浮动时需要注意以下两点 : (1) 必须为需要清除浮动的元素伪对象设置 height:0; 样式, 否则该元素会比其实际高度高出若干像素 (2) 必须在伪对象中设置 content 属性, 属性值可以为空, 如 content: ""; 下面继续在例 4-18 的基础上, 演示使用 overflow 属性清除浮动的方法, 如例 4-21 所示例 4-21 example21.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 使用 after 伪对象清除浮动 </title> 7 <style type="text/css"> 8.one,.two,.three{ 9 float:left; 10 width:100px; 11 height:100px; 12 margin:10px; 13 background: red; 14 } 15.box{ 16 border:1px solid #ccc; 17 background: blue; 18 } 19.box:after{ /* 对父元素应用 after 伪对象样式 */ 20 display:block; 21 clear:both; 22 content:""; 23 visibility:hidden; 24 height:0; 25 } 39

40 26 </style> 27 </head> 28 <body> 29 <div> 30 <div class="box"> 31 <div class="one">div1</div> 32 <div class="two">div2</div> 33 <div class="three">div3</div> 34 </div> 35 </div> 36 </body> 37 </html> 在例 4-21 中, 第 19~25 行代码用于为父元素应用 after 伪对象样式来清除浮动运行例 4-21, 效果如图 4-42 所示图 4-42 使用 after 伪对象清除浮动在图 4-42 中, 父元素被其子元素撑开了, 同样达到了预期想要的效果 3 overflow 属性 overflow 属性是 CSS 中的重要属性除了用于清除浮动之外, 还可用于当盒子内的元素超出盒子自身的大小时, 溢出内容的显示方式其基本语法格式如下 : 选择器 {overflow: 属性值 ;} 在上面的语法中,overflow 属性的属性值有四个, 分别表示不同的含义, 具体如表 4-3 所示表 4-3 overflow 的常用属性值属性值描述 visible 内容不会被修剪, 会呈现在元素框之外 ( 默认值 ) hidden 溢出内容会被修剪, 并且被修剪的内容是不可见的 auto 在需要时产生滚动条, 即自适应所要显示的内容 scroll 溢出内容会被修剪, 且浏览器会始终显示滚动条下面通过示例代码对 overflow 属性的用法进行演示首先, 通过 <div> 标记定义一个大盒子, 并添加部分文字内容示例代码如下 : <div>overflow 属性是 CSS 中的重要属性除了用于清除浮动之外, 还可用于当盒子内的元素超出盒子自身的大小时, 溢出内容的显示方式 </div> 接下来, 为大盒子设置宽高背景和 overflow 属性示例代码如下 : <style type="text/css"> div{ width:100px; 40

height:140px; background:skyblue; overflow:visible; /* 溢出内容呈现在元素框之外 */ } </style> 保存 HTML 文件, 刷新页面, 效果如图 4-43 所示图 4-43 定义 overflow:visible; 效果在图 4-43 中, 溢出的内容没有被修剪, 而是呈现在了元素框之外一般而言, 并没有必要设定

41 height:140px; background:skyblue; overflow:visible; /* 溢出内容呈现在元素框之外 */ } </style> 保存 HTML 文件, 刷新页面, 效果如图 4-43 所示图 4-43 定义 overflow:visible; 效果在图 4-43 中, 溢出的内容没有被修剪, 而是呈现在了元素框之外一般而言, 并没有必要设定 overflow 的属性为 visible, 除非你想覆盖它在其他地方设定的值如果希望溢出的内容被修剪, 且不可见, 可将 overflow 的属性值定义为 hidden 示例代码如下: overflow:hidden; /* 溢出内容被修剪, 且不可见 */ 保存 HTML 文件, 刷新页面, 效果如图 4-44 所示图 4-44 定义 overflow: hidden; 效果在图 4-44 中, 使用 overflow: hidden; 可以将溢出内容修剪, 并且被修剪的内容不可见另外, 如果希望元素框能够自适应其内容的多少, 在内容溢出时, 产生滚动条, 否则, 则不产生滚动条, 可以将 overflow 的属性值定义为 auto 示例代码如下: overflow:auto; /* 根据需要产生滚动条 */ 保存 HTML 文件, 刷新页面, 效果如图 4-45 所示 41

图 4-45 定义 overflow:auto; 效果在图 4-45 中, 元素框的右侧产生了滚动条, 拖动滚动条即可查看溢出的内容当盒子中的内容减少时, 滚动条就会消失值得一提的是, 当定义 overflow 的属性值为 scroll 时, 元素框中也会产生滚动条示例代码如下 : overflow:scroll; /* 始终显示滚动条 */ 保存 HTML 文件, 刷新页面, 效果如图

42 图 4-45 定义 overflow:auto; 效果在图 4-45 中, 元素框的右侧产生了滚动条, 拖动滚动条即可查看溢出的内容当盒子中的内容减少时, 滚动条就会消失值得一提的是, 当定义 overflow 的属性值为 scroll 时, 元素框中也会产生滚动条示例代码如下 : overflow:scroll; /* 始终显示滚动条 */ 保存 HTML 文件, 刷新页面, 效果如图 4-46 所示图 4-46 定义 overflow:scroll; 效果在图 4-46 中, 元素框中出现了水平和竖直方向的滚动条与 overflow: auto; 不同, 当定义 overflow: scroll; 时, 不论元素是否溢出, 元素框中的水平和竖直方向的滚动条都始终存在任务 4-5 元素的定位需求分析浮动布局虽然灵活, 但是却无法对元素的位置进行精确地控制在 CSS 中, 通过 CSS 定位 (CSS position) 可以实现网页元素的精确定位定位的基本思想很简单, 一般可以定义元素相对于其在文档流中的位置定位, 或者相对于父元素另一个元素甚至浏览器窗口本身的位置进行定位知识储备 1 元素的定位属性元素的定位属性主要包括定位模式和边偏移两部分, 具体介绍如下 : (1) 定位模式在 CSS 中,position 属性用于定义元素的定位模式, 其基本语法格式如下 : 选择器 {position: 属性值 ;} 其中, 属性值的分类及含义如表 4-4 所示表 4-4 position 属性的常用值属性值含义 static 静态定位 ( 默认定位方式 ) relative 相对定位, 相对于其原文档流的位置进行定位 absolute 绝对定位, 相对于其上一个已经定位的父元素进行定位 fixed 固定定位, 相对于浏览器窗口进行定位 42

43 从表 4-4 中可以看出, 元素的定位主要分为四类, 后面会针对每一种定位方式进行详细讲解 (2) 边偏移定位模式 (position) 仅仅用于定义元素以哪种方式定位, 并不能确定元素的具体位置在 CSS 中, 通过边偏移属性 top bottom left 或 right, 来精确定义定位元素的位置, 具体解释如表 4-5 所示表 4-5 边偏移设置方式边偏移属性描述 top 顶端偏移量, 定义元素相对于其父元素上边线的距离 bottom 底部偏移量, 定义元素相对于其父元素下边线的距离 left 左侧偏移量, 定义元素相对于其父元素左边线的距离 right 右侧偏移量, 定义元素相对于其父元素右边线的距离从表 4-5 中可以看出, 元素的边偏移属性分为四类边偏移属性的取值为不同单位的数值或百分比 2 静态定位当用于定位的元素其 position 属性的取值为 static 时, 称此定位模式为静态定位, 元素所在的位置也就是文档流中的位置任何元素在默认状态下都会以静态定位来确定自己的位置, 所以当没有定义 position 属性时, 并不说明该元素没有自己的位置, 它会遵循默认值显示为静态位置在静态定位状态下, 边偏移属性 (top bottom left 或 right) 不适用 3 相对定位当用于定位的元素其 position 属性的取值为 relative 时, 称此定位模式为相对定位, 如果对某一个元素进行相对定位, 则可以通过设置其边偏移属性, 将这个元素相对于它的起点进行移动但元素仍然保持其未定位前的形状, 它原本所占的空间也应继续保留下面通过一个案例来演示对元素设置相对定位的方法和效果, 如例 4-22 所示例 4-22 example22.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 相对定位的应用 </title> 7 <style type="text/css"> 8 div{ 9 width:100px; 10 height:50px; 11 background: pink; 12 margin-bottom: 10px; 13 } 14.div1{ 15 position: relative; 16 left: 150px; 17 top:100px; 18 } 19 </style> 20 </head> 43

21 <body> 22 <div class="div1">div1</div> 23 <div class="div2">div2</div> 24 <div class="div3">div3</div> 25 </body> 26 </html> 在例 4-22 中, 对 div1 设置相对定位模式, 并通过边偏移属性 left 和 top 改变它的位置, 如第 14~18 行代码所示

44 21 <body> 22 <div class="div1">div1</div> 23 <div class="div2">div2</div> 24 <div class="div3">div3</div> 25 </body> 26 </html> 在例 4-22 中, 对 div1 设置相对定位模式, 并通过边偏移属性 left 和 top 改变它的位置, 如第 14~18 行代码所示运行例 4-22, 效果如图 4-47 所示 100px 150px 图 4-47 相对定位效果从图 4-47 可以看出, 对 div1 设置相对定位后, 它会相对于其自身的默认位置进行偏移, 但是它在文档流中的位置仍然保留 4 绝对定位当用于定位的元素其 position 属性的取值为 absolute 时, 称此定位模式为绝对定位, 绝对定位是将元素依据最近的已经定位 ( 绝对固定或相对定位 ) 的父元素进行定位, 若所有父元素都没有定位, 则依据 body 根元素 ( 浏览器窗口 ) 进行定位下面通过一个案例来演示对元素设置绝对定位的方法和效果, 如例 4-23 所示例 4-23 example23.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6 <title> 绝对定位的应用 </title> 7 <style type="text/css"> 8.father{ 9 margin:0 auto; 10 width:300px; 11 height:200px; 12 background:yellow; 13 position:relative; 14 left:0; 15 top:0; 16 } 17.div1,.div2,.div3{ 44

45 18 width:100px; 19 height:50px; 20 background: pink; 21 margin-bottom: 10px; 22 } 23.div1{ 24 position:absolute; 25 left:150px; 26 top:100px; 27 } 28 </style> 29 </head> 30 <body> 31 <div class="father"> 32 <div class="div1">div1</div> 33 <div class="div2">div2</div> 34 <div class="div3">div3</div> 35 </div> 36 </body> 37 </html> 在例 4-23 中, 对父盒子设置相对定位模式, 对子盒子 div1 设置绝对定位模式, 并通过边偏移属性 left 和 top 改变它的位置, 如第 23~27 行代码所示运行例 4-23, 效果如图 4-48 所示 100px 150px 图 4-48 绝对定位效果 1 在图 4-48 中, 设置为绝对定位的元素 div1, 依据其父盒子进行绝对定位并且, 这时 div2 占据了 div1 的位置, 即 div1 脱离了标准文档流的控制, 不再占据标准文档流中的空间此时, 无论如何拖动浏览器窗口 div1 相对父盒子的位置都不会变化如果父盒子未进行定位, 则 div1 相对浏览器定位, 删除上述第 13~15 行代码后, 效果如图 4-49 所示 45

100px 150px 变化图 4-49 绝对定位效果 2 在图 4-49 中,div1 相对浏览器窗口进行定位拖动浏览器窗口的大小时,div1 相对浏览器的位置不会 5 固定定位下 : 当用于定位的元素 position 属性的取值为 fixed 时, 称此定位模式为固定定位固定定位的元素特性如固定定位是相对于当前浏览器窗口来进行的定位固定定位元素不再占空间,

46 100px 150px 变化图 4-49 绝对定位效果 2 在图 4-49 中,div1 相对浏览器窗口进行定位拖动浏览器窗口的大小时,div1 相对浏览器的位置不会 5 固定定位下 : 当用于定位的元素 position 属性的取值为 fixed 时, 称此定位模式为固定定位固定定位的元素特性如固定定位是相对于当前浏览器窗口来进行的定位固定定位元素不再占空间, 层级要高于普通元素, 跟浮动很像固定定位元素, 是一个块元素, 换句话说, 行内元素使用 fixed 定位, 将转成块元素如果只指定了 fixed 定位属性, 并没有设置偏移量, 则原地不动 6 z-index 层叠等级属性 z-index 属性决定了一个 HTML 元素的层叠级别当一个页面有多个层的时候, 就需要设置这些层的层叠顺序, 这样才不会将页面中需要显示的内容遮挡住通常, 越晚添加的层, 位置越靠上使用 z-index 属性设置元素堆叠级别的语法格式如下 : z-index: 序列号 ; 元素层叠级别是相对于元素在 Z 轴上 ( 与 X 轴 Y 轴相对照 ) 的位置而言一个更高的 z-index 值意味着这个元素在层叠顺序中会更靠近顶部当对多个元素同时设置定位时, 定位元素之间有可能会发生重叠, 在 CSS 中, 要想调整重叠定位元素的堆叠顺序, 可以对定位元素应用 z-index 层叠等级属性 z-index 没有单位, 其取值可为正整数负整数和 0 z-index 的默认属性值是 0, 取值越大, 定位元素在层叠元素中越居上注意 : z-index 属性仅对定位元素生效任务 4-6 布局及定义基础样式学习完上面的理论知识, 小黄准备着手制作青春树儿童摄影主题网站首页面首先进行的是准备工作效果分析页面布局定义基础样式, 然后再开始制作各个模块准备工作 1 建立站点 46

(1) 创建网站根目录在电脑本地磁盘任意盘符下创建网站根目录本书在 D 盘网页制作项目教程 (HTML+CSS+JavaScript) chapter04 文件夹下新建一个文件夹作为网站根目录, 命名为 child photo (2) 在根目录下新建文件打开网站根目录 child photo, 在根目录下新建 images 和 css 文件夹, 分别用于存放网站所需的图像和 CSS

47 (1) 创建网站根目录在电脑本地磁盘任意盘符下创建网站根目录本书在 D 盘网页制作项目教程 (HTML+CSS+JavaScript) chapter04 文件夹下新建一个文件夹作为网站根目录, 命名为 child photo (2) 在根目录下新建文件打开网站根目录 child photo, 在根目录下新建 images 和 css 文件夹, 分别用于存放网站所需的图像和 CSS 样式表文件 (3) 新建站点打开 Dreamweaver 工具, 在菜单栏中选择站点新建站点选项, 在弹出的窗口中输入站点名称青春树儿童摄影网然后, 浏览并选择站点根目录的存储位置点击保存按钮, 站点即创建成功 2 切图使用 Adobe Fireworks CS6 的切片工具, 导出青春树儿童摄影网首页中的素材图片, 存储在站点中的 images 文件夹中, 导出后的图片素材如图 4-50 所示图 4-50 切图后图片素材效果分析 1 HTML 结构分析青春树儿童摄影网首页面从上到下可以分为 5 个模块, 如图 4-51 所示 47

导航及 banner 模块悬浮框模块最新动态模块样片欣赏模块版权信息模块图 4-51 儿童摄影网网页布局 2 CSS 样式分析页面中的各个模块居中显示, 宽度为 980px, 因此, 页面的版心为 980px 另外, 页面中的所有字体均为微软雅黑, 背景颜色为 #fdfdfd, 这些可以通过 CSS 公共样式进行定义定义基础样式 1 页面布局下面对青春树儿童摄影网

48 导航及 banner 模块悬浮框模块最新动态模块样片欣赏模块版权信息模块图 4-51 儿童摄影网网页布局 2 CSS 样式分析页面中的各个模块居中显示, 宽度为 980px, 因此, 页面的版心为 980px 另外, 页面中的所有字体均为微软雅黑, 背景颜色为 #fdfdfd, 这些可以通过 CSS 公共样式进行定义定义基础样式 1 页面布局下面对青春树儿童摄影网首页面进行整体布局 : 在站点根目录下新建一个 HTML 文件, 命名为 project04, 然后使用 <div> 标记对页面进行布局, 具体代码如 project04.html 所示 project04.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 48

49 6 <title> 儿童摄影 </title> 7 </head> 8 <body> 9  10 <div id="bg"></div> 11  12  13 <div id="news"></div> 14  15  16 <div id="exhibition"></div> 17  18  19 <div id="footer"></div> 20  21  22 <div class="tree"></div> 23  24 </body> 25 </html> 在上述代码中, 定义 id 为 bg 的 <div> 用来搭建导航和 banner 模块的结构另外, 通过定义 id 为 news 和 exhibition 的两个 <div> 分别来搭建最新动态和样片欣赏部分的整体结构, 版权信息模块则通过 id 名为 footer 的 <div> 搭建, 最后定义类名为 tree 的 <div> 来搭建悬浮框部分 2 定义基础样式在站点根目录下的 CSS 文件夹内新建样式表文件 style04.css, 使用链入式 CSS 在 project04.html 文件中引入样式表文件然后定义页面的基础样式, 具体如下 : /* 重置浏览器的默认样式 */ *{margin:0; padding:0; border:0; background:none;} /* 全局控制 */ body{font-family:" 微软雅黑 ";background:#fdfdfd;} 上述第 2 行代码用于清除浏览器的默认样式, 第 4 行代码用于定义页面公共样式任务 4-7 制作导航及 banner 模块效果分析 1 结构分析导航及 banner 模块整体由一个大盒子进行控制导航部分可通过 <div> 嵌套 <span> 来搭建,banner 部分为一张大的图片, 可以通过给最外层的 <div> 定义背景图像来实现导航及 banner 模块的具体结构如图 4-52 所示 49

<div> ( 最外层 id 为 bg 的大盒子 ) <span> <span> <span> <span> <div> 图 4-52 导航及 banner 模块结构图 2 样式分析由于 banner 是作为最外层大盒子的背景图插入, 因此需设置最外层 id 为 bg 的 <div> 的宽高样式另外需要设置大盒子在页面中水平居中显示由于导航部分也需插入背景图像, 因此需同样设置其宽高样式,

50 <div> ( 最外层 id 为 bg 的大盒子 ) <span> <span> <span> <span> <div> 图 4-52 导航及 banner 模块结构图 2 样式分析由于 banner 是作为最外层大盒子的背景图插入, 因此需设置最外层 id 为 bg 的 <div> 的宽高样式另外需要设置大盒子在页面中水平居中显示由于导航部分也需插入背景图像, 因此需同样设置其宽高样式, 且在页面中水平居中显示最后, 还需导航部分的文字样式模块制作 1 搭建结构在 project04.html 文件内书写导航及 banner 模块的 HTML 结构代码具体如下 : 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 " 3 <html xmlns=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 6 <title> 儿童摄影 </title> 7 </head> 8 <body> 9  10 <div id="bg"> 11 <div class="nav"> 12 <span> 网站首页 </span> 13 <span class="margin_more"> 关于我们 </span> 14 <span> 摄影作品 </span> 15 <span> 联系我们 </span> 50

51 16 </div> 17 </div> 18  19 </body> 20 </html> 上述代码中,class 为 nav 的 <div> 用于搭建导航结构, 其中的 <span> 分别用于控制各个导航项 2 控制样式在样式表 style04.css 中书写导航及 banner 模块对应的 CSS 样式代码具体如下 : 1 #bg{ 2 width:980px; 3 height:617px; 4 background:url(../images/bg.jpg) no-repeat; 5 margin:0 auto; 6 padding-top:10px; 7 } 8.nav{ 9 width:848px; 10 height:46px; 11 background:url(../images/nav.png) no-repeat; 12 margin:0 auto; 13 padding:40px px; 14 } 15.nav span{ 16 color:#685649; 17 font-size:16px; 18 padding:0 30px; 19 } 20.nav.margin_more{margin-right:240px;} 上述代码中, 第 4 行代码通过背景图像来定义 banner 图片, 第 11 行代码用于添加导航部分的背景图片保存 project04.html 与 style04.css 文件, 刷新页面, 效果如图 4-53 所示 51

52 图 4-53 导航及 banner 模块效果图任务 4-8 制作最新动态模块效果分析 1 结构分析最新动态模块由最外层 id 为 news 的大盒子整体控制其内部包含 3 个样式相同的小盒子, 可由 3 个 <div> 分别进行定义对于小盒子中的图片和文本信息, 可通过在 <div> 中嵌套 <img> <h2> 和 <p> 标记来定义最新动态模块的具体结构如图 4-54 所示 52

<div>( 最外层 id 为 news 的大盒子 ) <div> <div> <div> <img> <img> <img> <h2> <p> <p> <h2> <p> <p> <h2> <p> <p> 2 样式分析图 4-54 最新动态模块结构分析对于模块上部分的最新动态图片, 可通过给最外层 id 为 news 的大盒子定义背景图像来实现, 因此需要对其设置宽度高度及背景样式

53 <div>( 最外层 id 为 news 的大盒子 ) <div> <div> <div> <img> <img> <img> <h2> <p> <p> <h2> <p> <p> <h2> <p> <p> 2 样式分析图 4-54 最新动态模块结构分析对于模块上部分的最新动态图片, 可通过给最外层 id 为 news 的大盒子定义背景图像来实现, 因此需要对其设置宽度高度及背景样式 ; 另外需要对其应用内边距及外边距样式对于内部的 3 个 <div> 小盒子, 需要使用浮动对它们进行布局, 然后再设置其边距和文本等样式模块制作 1 搭建结构在 project04.html 文件内书写最新动态模块的 HTML 结构代码具体如下 : 1 <div id="news"> 2 <div class="news_con"> 3 <img src="images/news1.jpg" /> 4 <h2 class="one"> 优惠活动 </h2> 5 <p class="two"> 新年订单有特大惊喜!</p> 6 <p class="shadow"></p> 7 </div> 8 <div class="news_con"> 9 <img src="images/news2.jpg" /> 10 <h2 class="one"> 宝贝写真应注意什么?</h2> 11 <p class="two"> 孩子拍摄的时候如果是陌生人接触的话会比较容易哭闹, 如果换做是亲近的或者比较平时比较熟悉玩得来的就会好很多 </p> 12 <p class="shadow"></p> 13 </div> 14 <div class="news_con"> 15 <img src="images/news3.jpg" /> 16 <h2 class="one"> 宝贝庆生会 </h2> 17 <p class="two"> 为新生宝宝准备的生日 party, 参与者可获得精美生日礼物一份 </p> 18 <p class="shadow"></p> 53

54 19 </div> 20 </div> 上述代码中, 在三个 <div> 中分别嵌套了一个空的段落 <p>, 用于在控制样式时定义阴影效果 2 控制样式在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制最新动态模块具体如下 : 1 #news{ 2 width:980px; 3 height:300px; 4 background:url(../images/dongtai.jpg) 60px top no-repeat; 5 margin:18px auto; 6 padding-top:120px; 7 } 8.news_con{ 9 width:294px; 10 height:256px; 11 float:left; 12 margin-left:29px; 13 } 14.news_con.one{ 15 width:284px; 16 height:50px; 17 padding-left:10px; 18 line-height:50px; 19 font-weight:bold; 20 font-size:16px; 21 border-bottom:1px solid #ddd; 22 } 23.news_con.two{ 24 width:284px; 25 height:70px; 26 line-height:20px; 27 padding:10px px; 28 font-size:12px; 29 color:#bbb; 30 } 31.news_con.shadow{ 32 width:294px; 33 height:5px; 34 background:url(../images/yinying.jpg) no-repeat; 35 } 上述代码中, 第 4 行代码用于设置模块上部分的最新动态图片第 8~13 行代码用于设置 3 个小 <div> 的宽度高度浮动和外边距样式 ; 第 31~35 行代码用于定义阴影效果保存 project04.html 与 style04.css 文件, 刷新页面, 效果如图 4-55 所示 54

<img> <img> 图 4-56 样片欣赏模块结构图 2 样式分析对于模块的背景图片, 可通过给最外层 id 为 exhibition 的大盒子定义背景图像来实现,

55 图 4-55 最新动态模块效果图任务 4-9 制作样片欣赏模块效果分析 1 结构分析样片欣赏模块整体由一个大盒子控制, 其内部包含 4 张样片图像, 可通过 <div> 嵌套 <img> 标记进行定义样片欣赏模块的具体结构如图 4-56 所示 <div>( 最外层 id 为 exhibition 的大盒子 ) <div> <img> <img> <img> <img> 图 4-56 样片欣赏模块结构图 2 样式分析对于模块的背景图片, 可通过给最外层 id 为 exhibition 的大盒子定义背景图像来实现, 因此需要对其设置宽度高度及背景样式 ; 另外需要对其应用内边距及外边距样式内部的 <div> 同样需设置宽度高度及外边距样式, 另外还需对 <img> 标记应用左外边距, 使图片拉开一定的间距 55

56 模块制作 1 搭建结构在 project04.html 文件内书写样片欣赏模块的 HTML 结构代码具体如下 : 1  2 <div id="exhibition"> 3 <div class="pic"> 4 <img src="images/img1.jpg" /> 5 <img src="images/img2.jpg" /> 6 <img src="images/img3.jpg" /> 7 <img src="images/img4.jpg" /> 8 </div> 9 </div> 10  2 控制样式在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制样片欣赏模块具体如下 : 1 #exhibition{ 2 width:980px; 3 height:292px; 4 background:url(../images/xinshang.jpg) no-repeat; 5 margin:0 auto; 6 padding-top:170px; 7 } 8 #exhibition.pic{ 9 width:916px; 10 height:260px; 11 margin:0 auto; 12 } 13 #exhibition.pic img{margin-left:56px;} 上述代码中, 第 11 行代码用于定义存放图片的 <div> 在样片欣赏模块中水平居中显示保存 project04.html 与 style04.css 文件, 效果如图 4-57 所示 56

所示 div ( 外层 id 为 footer 的大盒子 ) img div( 外层 class 为 tree 的大盒子 ) 图 4-58 页脚

57 图 4-57 样片欣赏模块效果图任务 4-10 制作页脚及悬浮框模块效果分析 1 结构分析页脚模块和悬浮框模块的页面结构相对较为简单, 均由外层的 <div> 整体控制悬浮框模块内部需嵌套 <img> 标记来定义二维码图片, 结构如图 4-58 所示 div ( 外层 id 为 footer 的大盒子 ) img div( 外层 class 为 tree 的大盒子 ) 图 4-58 页脚及悬浮框模块分析 2 样式分析页脚模块背景的锯齿样式需通过背景图像来实现, 因此需要为页脚模块添加背景图像悬浮框模块需设置为固定定位, 使其始终显示在页面的右下角 57

模块制作 1 搭建结构在 project04.html 文件内书写页脚和悬浮框模块的 HTML 结构代码具体如下 : 1 <!--footer begin--> 2 <div id="footer"> 青春树版权所有 2000-2016 京 ICP 备 08001421 号京公网安备 110108007702</div> 3 <!--footer end--> 4 <!

58 模块制作 1 搭建结构在 project04.html 文件内书写页脚和悬浮框模块的 HTML 结构代码具体如下 : 1  2 <div id="footer"> 青春树版权所有京 ICP 备号京公网安备 </div> 3  4  5 <div class="tree"><img src="images/erweima.png"/></div> 6  2 控制样式在样式表文件 style04.css 中书写 CSS 样式代码, 用于控制页脚和悬浮框模块具体如下 : 1 #footer{ 2 width:100%; 3 height:80px; 4 background:url(../images/footer_bg.jpg) repeat-x; 5 color:#fff; 6 text-align:center; 7 line-height:80px; 8 } 9.tree{ 10 position:fixed; 11 right:5%; 12 bottom:5%; 13 } 上述代码中, 第 4 行代码用于定义页脚模块的锯齿效果 ; 第 9~13 行代码通过固定定位的方式使悬浮框固定在页面的右下角保存 project04.html 与 style04.css 文件, 效果如图 4-59 所示 58

59 图 4-59 页脚和浮动框模块效果图项目总结 1. 盒子模型是 CSS 网页布局的基础, 建议读者认真体会好的布局可以大大减少页面的兼容 bug 2. 块元素与行内元素也是本项目的重点哦, 通过本项目的学习, 你是不是能够根据页面需求灵活的实现它们之间的转换呢! 3. 使用 HTML CSS 制作页面时, 处处可见浮动,DIV+ 浮动布局是不是很神奇呢另外提醒读者孰能生巧, 多多练习才能提高代码编写效率哦! 课后练习一填空题 1. 在 CSS 中, 用于设置边框颜色的是属性 2. 用于调整元素内容与边框之间的距离的是属性 3. 在 CSS 中, 用于设置上外边距的是属性 4. 元素主要分为行内元素和块元素, 使用属性可以转换元素的类型 5. 在 CSS 中, 将图像作为网页元素的背景, 可以通过属性实现二判断题 1. 行内元素不能设置背景 ( ) 2. 使用 display:none; 虽然可以隐藏元素, 但是这时元素仍然会占用页面空间 ( ) 3. border:1px solid #F00; 和 border: solid #F00 1px; 实现的效果是完全一样的 ( ) 4. 将元素转换为行内块元素的 CSS 代码为 display:inline; ( ) 5. border-style:dashed; 样式可以将元素的边框设置为实线 ( ) 6. 对一个宽度固定的块级元素应用 margin:0 auto; 样式, 可使其水平居中 ( ) 7. 在 CSS 中 border 属性可用于改变元素的内边距 ( ) 8. 背景图像的位置是可以调整的, 但是只可以用使用预定义的关键字, 比如 :left,top 等 ( ) 9. 在 CSS 中 background-images 属性用于定义背景图像 ( ) 10. 将 span 转换为行内块元素的方法是对其应用 display:inline-block; 样式 ( ) 三选择题 1. 下面选项中, 可以改变盒子模型外边距的是 ( ) A padding B margin C type D border 2. 如何改变元素的左外边距 ( )? A text-indent B margin-left C margin D margin-right 3. 在 CSS 中, 可以通过 float 属性为元素设置浮动, 以下属于 float 属性值的是 ( ) A left B center C right D none 4. 下列选项中, 可以为元素清除默认内外边距的是 ( ) A font-size:0; B line-height:0 C padding:0; D margin:0 5. overflow 属性用于规范溢出内容的显示方式, 下列选项中属于 overflow 常用属性值的是 ( ) A visible B hidden C auto D scroll 6. position 属性用于定义元素的定位模式, 下列选项中属于 position 属性常用属性值的是 ( ) A static B relative C absolute D fixed 59

60 7. 下列选项中, 属于边框属性样式的是 ( ) A solid B dashed C dotted D none 8. 将一个盒子的上边框定义为 1 像素蓝色单实线, 下列代码正确的是 ( ) A border-top:1px solid #00f; B border:1px solid #00f; C border-top:1px dashed #00f; D border:1px dashed #00f; 9. 关于元素显示模式的转换, 下列说法正确的是 ( ) A 将块元素转换为行内元素的方法是使用 display:inline; 样式 B 将行内元素转换为块元素的方法是使用 display:inline; 样式 C 两者不可以转换 D 两者可以随意转换 10. 下列选项中, 关于 display:none; 样式说法正确的是 ( ) A 显示元素对象 B 隐藏元素对象 C 占用页面空间 D 不占用页面空间 60

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1

博学谷让 IT 教学更简单, 让 IT 学习更有效传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1 传智播客网页设计与制作 (HTML+CSS) 教学设计课程名称 : 网页设计与制作 (HTML+CSS) 授课年级 : 2014 年级授课学期 : 2014 学年第一学期教师姓名 : 某某老师 2014 年 03 月 28 日 1 课题名称第 4 章盒子模型计划学时 6 课时内容分析教学目标及基本要求重点及措施盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征,