传智播客专注于 Java.Net 和 Php 网页平面设计工程师的培训第 4 章盒子模型学习目标了解盒子模型的概念掌握盒子相关属性熟悉元素的类型理解元素的转换盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果接下来

Size: px

Start display at page:

Download "传智播客专注于 Java.Net 和 Php 网页平面设计工程师的培训第 4 章盒子模型学习目标了解盒子模型的概念掌握盒子相关属性熟悉元素的类型理解元素的转换盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果接下来"

贻谘冀
4 years ago
Views:

1 认识盒子模型学习盒子模型首先需要了解其概念, 所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子, 也就是一个盛装内容的容器每个矩形都由元素的内容内边距 (padding) 边框(border) 和外边距 (margin) 组成

1 学习目标了解盒子模型的概念掌握盒子相关属性熟悉元素的类型理解元素的转换盒子模型是 CSS 网页布局的基础, 只有掌握了盒子模型的各种规律和特征, 才可以更好地控制网页中各个元素所呈现的效果接下来, 本章将对盒子模型的概念盒子相关属性及元素的类型和转换进行详细地讲解 4.1 认识盒子模型学习盒子模型首先需要了解其概念, 所谓盒子模型就是把 HTML 页面中的元素看作是一个矩形的盒子, 也就是一个盛装内容的容器每个矩形都由元素的内容内边距 (padding) 边框(border) 和外边距 (margin) 组成为了更形象地认识 CSS 盒子模型, 首先我们从生活中常见的手机盒子的构成说起, 如图 4-1 所示图 4-1 手机盒子的构成图 4-2 多个手机盒子一个完整的手机盒子通常包含手机填充泡沫和盛装手机的纸盒如果把手机想象成 HTML 元素, 那么手机盒子就是一个 CSS 盒子模型, 其中手机为 CSS 盒子模型的内容, 填充泡沫的厚度为 CSS 盒子模型的内边距, 纸盒的厚度为 CSS 盒子模型的边框, 如图 4-1 所示当多个手机盒子放在一起时, 他们之间的距离就是 CSS 盒子模型的外边距, 如图 4-2 所示 1

熟悉了盒子模型的概念, 接下来通过一个具体的案例来认识到底什么是盒子模型新建 HTML 页面, 并在页面中添加一个段落, 然后通过盒子相关属性对段落进行控制, 如例 4-1 所示例 4-1 example01.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

2 熟悉了盒子模型的概念, 接下来通过一个具体的案例来认识到底什么是盒子模型新建 HTML 页面, 并在页面中添加一个段落, 然后通过盒子相关属性对段落进行控制, 如例 4-1 所示例 4-1 example01.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; /* 盒子模型的高度 */ 11 border:15px solid red; /* 盒子模型的边框 */ 12 background:#ccc; /* 盒子模型的背景 */ 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-3 所示图 4-3 盒子在浏览器中的效果在上面的例子中 <p> 标记就是一个盒子, 其构成如图 4-4 所示 2

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

3 图 4-4 盒子模型结构网页中所有的元素和对象都是由图 4-4 所示的基本结构组成, 并呈现出矩形的盒子效果在浏览器看来, 网页就是多个盒子嵌套排列的结果其中, 内边距出现在内容区域的周围, 当给元素添加背景色或背景图像时, 该元素的背景色或背景图像也将出现在内边距中, 外边距是该元素与相邻元素之间的距离, 如果给元素定义边框属性, 边框将出现在内边距和外边距之间需要注意的是, 虽然盒子模型拥有内边距边框外边距宽和高这些基本属性, 但是并不要求每个元素都必须定义这些属性 4.2 盒子模型相关属性理解了盒子模型的结构后, 要想随心所欲地控制页面中每个盒子的样式, 还需要掌握盒子模型的相关属性, 本小节将对这些属性进行详细地讲解边框属性为了分割页面中不同的盒子, 常常需要给元素设置边框效果在 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: 宽度 ; border-left-color: 颜色 ; border-left: 宽度样式颜色 ; 3

4 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=" 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 4

5 6 <title> 设置边框样式 </title> 7 <style type="text/css"> 8 h2{ border-style:double;} /*4 条边框相同双实线 */ 9.one{ 10 border-top-style:dotted; /* 上边框点线 */ 11 border-bottom-style:dotted; /* 下边框点线 */ 12 border-left-style:solid; /* 左边框单实线 */ 13 border-right-style:solid; /* 右边框单实线 */ 14 /* 上面 4 行代码等价于 :border-style:dotted solid;*/ 15 } 16.two{ 17 border-style:solid dotted dashed; /* 上实线左右点线下虚线 */ 18 } 19 </style> 20 </head> 21 <body> 22 <h2> 边框样式双实线 </h2> 23 <p class="one"> 边框样式上下为点线左右为单实线 </p> 24 <p class="two"> 边框样式上边框单实线左右点线下边框虚线 </p> 25 </body> 26 </html> 在例 4-2 中, 使用边框样式 border-style 的综合和单边属性, 设置标题和段落文本的边框样式分别在 Firefox 和 IE8 中运行例 4-2, 效果如图 4-5 和图 4-6 所示图 4-5 Firefox 下的边框效果图 4-6 IE 下的边框效果很明显, 当设置边框样式为点线 dotted 或虚线 dashed 时,IE8 和火狐下的显示效果是不一样的, 也就是说, 点线 dotted 和虚线 dashed 样式, 存在兼容问题实际网页制作中, 通常使用插入背景图的形式实现点线或虚线的边框效果 2 设置边框宽度(border-width) border-width 属性用于设置边框的宽度, 其常用取值单位为像素 px 同边框样式一样, 边框宽度也可以针对四条边分别设置, 或综合设置四条边的宽度, 具体如下 : border-top-width: 上边框宽度 ; border-right-width: 右边框宽度 ; border-bottom-width: 下边框宽度 ; 5

border-left-width: 左边框宽度 ; border- width: 上边框宽度 [ 右边框宽度下边框宽度左边框宽度 ]; 综合设置四边宽度必须按上右下左的顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下了解了边框宽度属性, 接下来通过一个案例来演示其用法新建 HTML 页面, 并在页面中添加段落文本,

6 border-left-width: 左边框宽度 ; border- width: 上边框宽度 [ 右边框宽度下边框宽度左边框宽度 ]; 综合设置四边宽度必须按上右下左的顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下了解了边框宽度属性, 接下来通过一个案例来演示其用法新建 HTML 页面, 并在页面中添加段落文本, 然后通过边框宽度属性对段落进行控制, 如例 4-3 所示例 4-3 example03.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 p{ 9 border-width:1px; /* 综合设置 4 边宽度 */ 10 border-top-width:3px; /* 设置上边宽度覆盖 */ 11 /* 上面 2 行代码等价于 :border-width:3px 1px 1px; */ 12 } 13 </style> 14 </head> 15 <body> 16 <p> 边框宽度上 3px, 下左右 1px 边框样式单实线 </p> 17 </body> 18 </html> 在例 4-3 中, 先综合设置四边的边框宽度, 然后单独设置上边框宽度进行覆盖, 使上边框的宽度不同运行例 4-3, 效果如图 4-7 所示图 4-7 仅设置边框宽度在图 4-7 中, 段落文本并没有像预期的一样添加边框效果这是因为在设置边框宽度时, 必须同时设置边框样式, 如果未设置样式或设置为 none, 则不论宽度设置为多少都无效这时, 在例 4-3 的 CSS 代码中, 为 <p> 标记添加边框样式, 代码如下 : border-style:solid; /* 综合设置边框样式 */ 保存 HTML 文件, 刷新网页, 效果如图 4-8 所示 6

图 4-8 在图 4-8 中, 段落文本添加了预期的边框效果 3 设置边框颜色 (border-color) 同时设置边框宽度和样式 border-color 属性用于设置边框的颜色, 其取值可为预定义的颜色值十六进制 #RRGGBB 或 RGB 代码 rgb(r,g,b), 实际工作中最常用的是十六进制 #RRGGBB 边框的默认颜色为元素本身的文本颜色, 对于没有文本的元素,

7 图 4-8 在图 4-8 中, 段落文本添加了预期的边框效果 3 设置边框颜色 (border-color) 同时设置边框宽度和样式 border-color 属性用于设置边框的颜色, 其取值可为预定义的颜色值十六进制 #RRGGBB 或 RGB 代码 rgb(r,g,b), 实际工作中最常用的是十六进制 #RRGGBB 边框的默认颜色为元素本身的文本颜色, 对于没有文本的元素, 例如只包含图像的表格, 其默认边框颜色为父元素的文本颜色与边框样式和宽度相同, 边框颜色的单边与综合设置如下 : border-top-color: 上边框颜色 ; border-right-color: 右边框颜色 ; border-bottom-color: 下边框颜色 ; border-left-color: 左边框颜色 ; border-color: 上边框颜色 [ 右边框颜色下边框颜色左边框颜色 ]; 综合设置四边颜色必须按顺时针顺序采用值复制, 即一个值为四边, 两个值为上下 / 左右, 三个值为上 / 左右 / 下例如设置段落的边框样式为实线, 上下边灰色, 左右边红色, 代码如下 : p{ } border-style:solid; /* 综合设置边框样式 */ border-color:#ccc #FF0000; /* 设置边框颜色 : 两个值为上下左右 */ 再如设置二级标题的边框样式为实线, 且下边框为红色, 其余边框采用默认文本的颜色, 代码如下 : h2{ } border-style:solid; /* 综合设置边框样式 */ border-bottom-color:red; /* 单独设置下边框颜色 */ 注意 : 设置边框颜色时同样必须设置边框样式, 如果未设置样式或设置为 none, 则其他的边框属性无效多学一招 : 巧用边框透明色 (transparent) CSS2.1 将元素背景延伸到了边框, 同时增加了 transparent 透明色如果需要将已有的边框设置为暂时不可见, 可使用 border-color:transparent;, 这时如同没有边框, 看到的是背景色, 需要边框可见时再设置相应的颜色, 这样可以保证元素的区域不发生变化这种方式与取消边框样式不同, 取消边框样式时, 虽然边框也不可见, 但是这时边框的宽度为 0, 即元素的区域发生了变化 IE6 及以下版本不支持 transparent 透明色, 必须将边框颜色设置为背景色, 以保证元素区域不变 4 综合设置边框 7

8 使用 border-style border-width border-color 虽然可以实现丰富的边框效果, 但是这种方式书写的代码繁琐, 且不便于阅读, 其实 CSS 提供了更简单的边框设置方式, 具体如下 : border-top: 上边框宽度样式颜色 ; border-right: 右边框宽度样式颜色 ; border-bottom: 下边框宽度样式颜色 ; border-left: 左边框宽度样式颜色 ; border: 四边宽度样式颜色 ; 上面的设置方式中, 宽度样式颜色顺序任意, 不分先后, 可以只指定需要设置的属性, 省略的部分将取默认值 ( 样式不能省略 ) 当每一侧的边框都不同, 或者只需单独定义某一侧的边框时, 可以使用单侧边框的综合设置属性 border-top border-bottom border-left 或 border-right 例如单独定义段落的上边框, 代码如下 : p{ border-top:2px solid #CCC;} /* 定义上边框, 各个值顺序任意 */ 该样式将段落的上边框设置为 2 像素单实线灰色, 其他各边的边框按默认值不可见, 等价于 : p{ border-top-style:solid; border-top-width:2px; border-top-color:#ccc; } 当四条边的边框样式都相同时, 可以使用 border 属性进行综合设置例如将二级标题的边框设置为双实线红色 3 像素宽, 代码如下 : h2{border:3px double red;} 像 border border-top 等这样, 能够一个属性定义元素的多种样式, 在 CSS 中称之为复合属性常用的复合属性有 font border margin padding 和 background 等实际工作中常使用复合属性, 他可以简化代码, 提高页面的运行速度, 但是如果只有一项值, 最好不要应用复合属性, 以免样式不被兼容为了使初学者更好地理解复合属性, 接下来对标题段落和图像分别应用 border 相关的复合属性设置边框, 如例 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-bottom:5px double blue; /*border-bottom 复合属性设置下边框 */ 10 text-align:center; 11 } 12.text{ /* 单侧复合属性设置各边框 */ 13 border-top:3px dashed #F00; 14 border-right:10px double #900; 15 border-bottom:3px dotted #CCC; 16 border-left:10px solid green; 17 } 8

18.pingmian{ /*border 复合属性设置各边框相同 */ 19 border:15px solid #CCC; 20 } 21 </style> 22 </head> 23 <body> 24 <h2> 设置边框属性 </h2> 25 <p class="text"> 该段落使用单侧边框的综合属性, 分别给上右下左四个边设置不同的样式 </p> 26 <img

9 18.pingmian{ /*border 复合属性设置各边框相同 */ 19 border:15px solid #CCC; 20 } 21 </style> 22 </head> 23 <body> 24 <h2> 设置边框属性 </h2> 25 <p class="text"> 该段落使用单侧边框的综合属性, 分别给上右下左四个边设置不同的样式 </p> 26 <img class="pingmian" src="img/design.jpg" alt=" 传智播客网页平面设计 " /> 27 </body> 28 </html> 在例 4-4 中, 使用边框的单侧复合属性设置二级标题和段落文本, 其中二级标题添加下边框, 段落文本的各侧边框样式都不同, 然后使用复合属性 border, 为图像设置四条相同的边框运行例 4-4, 效果如图 4-9 所示图 4-9 综合设置边框内边距属性为了调整内容在盒子中的显示位置, 常常需要给元素设置内边距, 所谓内边距指的是元素内容与边框之间的距离, 也常常称为内填充接下来本小节将对内边距相关属性进行详细讲解在 CSS 中 padding 属性用于设置内边距, 同边框属性 border 一样,padding 也是复合属性, 其相关设置如下 : padding-top: 上内边距 ; padding-right: 右内边距 ; padding-bottom: 下内边距 ; padding-left: 左内边距 ; padding: 上内边距 [ 右内边距下内边距左内边距 ]; 9

10 在上面的设置中,padding 相关属性的取值可为 auto 自动 ( 默认值 ) 不同单位的数值相对于父元素 ( 或浏览器 ) 宽度的百分比 %, 实际工作中最常用的是像素值 px, 不允许使用负值同边框相关属性一样, 使用复合属性 padding 定义内边距时, 必须按顺时针顺序采用值复制, 一个值为四边两个值为上下 / 左右, 三个值为上 / 左右 / 下了解了内边距的相关属性, 接下来通过一个案例来演示其效果新建 HTML 页面, 在页面中添加一个图像和一段段落, 然后使用 padding 相关属性, 控制他们的显示位置, 如例 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.border{ border:5px solid #ccc;} /* 为图像和段落设置边框 */ 9 img{ 10 padding:80px; /* 图像 4 个方向内边距相同 */ 11 padding-bottom:0; /* 单独设置下边距 */ 12 /* 上面两行代码等价于 padding:80px 80px 0;*/ 13 } 14 p{ padding:5%;} /* 段落内边距为父元素宽度的 5%*/ 15 </style> 16 </head> 17 <body> 18 <img class="border" src="img/couser.jpg" alt="2014 课程马上升级 " /> 19 <p class="border"> 段落内边距为父元素宽度的 5% </p> 20 </body> 21 </html> 在例 4-5 中, 使用 padding 相关属性设置图像和段落的内边距, 其中段落内边距使用 % 数值运行例 4-5, 效果如图 4-10 所示 10

图 4-10 设置内边距由于段落的内边距设置为了 % 数值, 当拖动浏览器窗口改变其宽度时, 段落的内边距会随之发生变化 ( 这时 <p> 标记的父元素为 <body>) 注意 : 如果设置内外边距为百分比, 不论上下或左右的内外边距, 都是相对于父元素宽度 width 的百分比, 随父元素 width 的变化而变化, 和高度 height 无关 4.2.

11 图 4-10 设置内边距由于段落的内边距设置为了 % 数值, 当拖动浏览器窗口改变其宽度时, 段落的内边距会随之发生变化 ( 这时 <p> 标记的父元素为 <body>) 注意 : 如果设置内外边距为百分比, 不论上下或左右的内外边距, 都是相对于父元素宽度 width 的百分比, 随父元素 width 的变化而变化, 和高度 height 无关外边距属性网页是由多个盒子排列而成的, 要想拉开盒子与盒子之间的距离, 合理地布局网页, 就需要为盒子设置外边距, 所谓外边距指的是元素边框与相邻元素之间的距离接下来本小节将对外边距相关属性进行详细地讲解在 CSS 中 margin 属性用于设置外边距, 他是一个复合属性, 与内边距 padding 的用法类似, 设置外边距的方法如下 : margin-top: 上外边距 ; margin-right: 右外边距 ; margin-bottom: 下外边距 ; margin-left: 上外边距 ; margin: 上外边距 [ 右外边距下外边距左外边距 ]; margin 相关属性的值, 以及复合属性 margin 取 1~4 个值的情况与 padding 相同但是外边距可以使用负值, 使相邻元素重叠, 在后面的章节中将详细介绍外边距取负值的情况当对块级元素应用宽度属性 width, 并将左右的外边距都设置为 auto, 可使块级元素水平居中, 实际工作中常用这种方式进行网页布局, 示例代码如下 :.header{ width:960px; margin:0 auto;} 关于块级元素以及网页布局这里了解即可, 在后面的章节中将会详细介绍了解了外边距的相关属性, 接下来通过一个案例来演示其效果新建 HTML 页面, 在页面中添加一个图像和一段段落, 然后使用 margin 相关属性, 对图像和段落进行排版, 如例 4-6 所示 11

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

12 例 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 img{ 9 border:5px solid red; 10 float:left; /* 设置图像左浮动 */ 11 margin-right:50px; /* 设置图像的右外边距 */ 12 margin-bottom:30px; /* 设置图像的左外边距 */ 13 /* 上面两行代码等价于 margin:0 50px 30px 0;*/ 14 } 15 p{ text-indent:2em;} 16 </style> 17 </head> 18 <body> 19 <img src="img/super_couser.jpg" alt="2014 全新优化升级课程 " /> 20 <p> 传智播客 2014 全新优化升级课程响应式手机网站制作 : 该课程将学习互联网最前沿的 html5 与 css3 技术, 并结合最流行的 JQueryMobile+PhoneGap 等框架, 实现企业网站的响应式 web 设计 </p> 21 <p> 其他增值课程 : 电子商务视觉营销设计淘宝店铺装修设计多媒体终端界面设计 </p> 22 <p> 详情请见传智播客官方网站 23 </body> 24 </html> 在例 4-6 中, 使用浮动属性 float 使图像居左, 同时设置图像的右外边距和下外边距, 使图像和文本之间拉开一定的距离, 实现常见的排版效果 ( 对于浮动, 这里了解即可, 后面章节将会详细介绍 ) 运行例 4-6, 效果如图 4-11 所示图 4-11 设置外边距很明显, 在图 4-11 中图像和段落文本之间拉开了一定的距离, 实现了图文混排的效果但是, 段落与段落之间, 浏览器边界与网页内容之间也存在一定的距离, 而我们并没有对 <p> 或 <body> 元素应用内边距或外边距, 可见, 这些元素默认就存在内边距和外边距样式网页中默认就存在内外边距的元素有 <body> <h1>~<h6> <p> 等 12

13 为了更方便地控制网页中的元素, 制作网页时, 可使用如下代码清除元素的默认内外边距 : *{ } padding:0; /* 清除内边距 */ margin:0; /* 清除外边距 */ 注意 : 使用 margin 定义块元素的垂直外边距时, 可能会出现外边距的合并背景属性网页能通过背景图像给人留下第一印象, 如节日题材的网站一般采用喜庆祥和的图片来突出效果, 所以在网页设计中, 控制背景颜色和背景图像是一个很重要的步骤接下来本小节将详细介绍 CSS 控制背景颜色和背景图像的方法, 具体如下 : 1 设置背景颜色在 CSS 中, 网页元素的背景颜色使用 background-color 属性来设置, 其属性值与文本颜色的取值一样, 可使用预定义的颜色值十六进制 #RRGGBB 或 RGB 代码 rgb(r,g,b) background-color 的默认值为 transparent, 即背景透明, 这时子元素会显示其父元素的背景了解了背景颜色属性 background-color, 接下来通过一个案例来演示其用法新建 HTML 页面, 在页面中添加标题和段落文本, 然后通过 background-color 属性控制标题标记 <h2> 和主体标记 <body> 的背景颜色, 如例 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 body{ background-color: #CCC;} /* 设置网页的背景颜色 */ 9 h2{ 10 font-family:" 微软雅黑 "; 11 color:#fff; 12 background-color:#f00; /* 设置标题的背景颜色 */ 13 } 14 </style> 15 </head> 16 <body> 17 <h2> 史上最难就业年, 怎么办?</h2> 18 <p> 到传智播客设计学院, 免费学网页平面 UI 设计, 高薪就业无忧! 详情请见传智播客网页平面设计学院官网 </p> 19 </body> 20 </html> 13

在例 4-7 中, 通过 background-color 属性分别控制标题和网页主体的背景颜色运行例 4-7, 效果如图 4-12 所示图 4-12 设置背景颜色在图 4-12 中, 标题文本的背景颜色为红色, 段落文本显示父元素 body 的背景颜色这是由于未对段落标记 <p> 设置背景颜色, 其默认为 transparent 透明, 所以段落将显示其父元素的背景颜色 2

html 文件所在的文件夹中, 然后更改 body 元素的 CSS 样式代码 : body{ background-color:#ccc; /* 设置网页的背景颜色 */ background-image:url(img/jianbian.

14 在例 4-7 中, 通过 background-color 属性分别控制标题和网页主体的背景颜色运行例 4-7, 效果如图 4-12 所示图 4-12 设置背景颜色在图 4-12 中, 标题文本的背景颜色为红色, 段落文本显示父元素 body 的背景颜色这是由于未对段落标记 <p> 设置背景颜色, 其默认为 transparent 透明, 所以段落将显示其父元素的背景颜色 2 设置背景图像背景不仅可以设置为某种颜色, 在 CSS 中, 还可以将图像作为网页元素的背景, 通过 background-image 属性实现以例 4-7 为基础, 准备一张背景图像, 如图 4-13 所示, 将图像放在 example07.html 文件所在的文件夹中, 然后更改 body 元素的 CSS 样式代码 : body{ background-color:#ccc; /* 设置网页的背景颜色 */ background-image:url(img/jianbian.jpg); /* 设置网页的背景图像 */ } 保存 HTML 页面, 刷新网页, 效果如图 4-14 所示图 4-13 准备的背景图像图 4-14 设置网页的背景图像在图 4-14 中, 背景图像自动沿着水平和竖直两个方向平铺, 充满整个网页, 并且覆盖了 <body> 的背景颜色 3 设置背景图像平铺默认情况下, 背景图像会自动向水平和竖直两个方向平铺, 如图 4-14 所示如果不希望图像平铺, 或者只沿着一个方向平铺, 可以通过 background-repeat 属性来控制, 该属性的取值如下 : repeat: 沿水平和竖直两个方向平铺 ( 默认值 ) no-repeat: 不平铺 ( 图像位于元素的左上角, 只显示一次 ) repeat-x: 只沿水平方向平铺 repeat-y: 只沿竖直方向平铺例如, 希望上面例子中的图像只沿着水平方向平铺, 可以将 body 元素的 CSS 代码更改如下 : 14

背景图像没有覆盖的区域按照设置的背景颜色显示也就是说当背景图像和背景颜色同时存在时, 背景图像优先显示这时如果将 <body> 的背景颜色更改为背景图像最下一排像素的颜色, 为了清楚, 去掉 <h2> 标记的背景颜色,CSS 代码如下 : body{ background-color:#eef8ff; /*

15 body{ background-color:#ccc; /* 设置网页的背景颜色 */ background-image:url(img/jianbian.jpg); /* 设置网页的背景图像 */ background-repeat:repeat-x; /* 设置背景图像的平铺 */ } 保存 HTML 页面, 刷新网页, 效果如图 4-15 所示图 4-15 设置背景图像水平平铺在图 4-15 中, 图像只沿着水平方向平铺, 背景图像覆盖的区域就显示背景图像, 背景图像没有覆盖的区域按照设置的背景颜色显示也就是说当背景图像和背景颜色同时存在时, 背景图像优先显示这时如果将 <body> 的背景颜色更改为背景图像最下一排像素的颜色, 为了清楚, 去掉 <h2> 标记的背景颜色,CSS 代码如下 : body{ background-color:#eef8ff; /* 更改网页的背景颜色 */ background-image:url(img/jianbian.jpg); /* 设置网页的背景图像 */ } h2{ background-repeat:repeat-x; /* 设置背景图像的平铺 */ font-family:" 微软雅黑 "; color:#fff; } 保存 HTML 文件, 再次刷新网页, 效果如图 4-16 所示图 4-16 过渡自然的网页背景从图 4-16 容易看出, 网页中出现了非常自然的过渡背景 4 设置背景图像的位置 15

如果将背景图像的平铺属性 background-repeat 定义为 no-repeat, 图像将显示在元素的左上角, 如例 4-8 所示例 4-8 example08.html 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.

org/1999/xhtml"> 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(img/wdjl.

16 如果将背景图像的平铺属性 background-repeat 定义为 no-repeat, 图像将显示在元素的左上角, 如例 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-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ 10 background-repeat:no-repeat; /* 设置背景图像不平铺 */ 11 } 12 </style> 13 </head> 14 <body> 15 <h2> 三个月主要学习哪些内容?</h2> 16 <p> 传智播客网页平面设计学院课程 :photoshop illustrator 版式布局及配色技巧 UI 用户界面设计 Flash 互动广告动画设计 HTML/XHTML CSS Dreamweaver Javascript 网页特效平面设计综合实战网站综合实战 </p> 17 </body> 18 </html> 在例 4-8 中, 将主体元素 <body> 的背景图像定义为 no-repeat 不平铺在浏览器中运行, 效果如图 4-17 所示, 背景图像位于 HTML 页面的左上角, 即 <body> 元素的左上角图 4-17 背景图像不平铺图 4-18 背景图像在右下角如果希望背景图像出现在其他位置, 就需要另一个 CSS 属性 background-position, 设置背景图像的位置例如, 将例 4-8 中的背景图像定义在页面的右下角, 可以更改 body 元素的 CSS 样式代码 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:right bottom; /* 设置背景图像的位置 */ 16

} 保存 HTML 文件, 刷新网页, 效果如图 4-18 所示, 背景图像出现在页面的右下角在 CSS 中,background-position 属性的值通常设置为两个, 中间用空格隔开, 用于定义背景图像在元素的水平和垂直方向的坐标, 例如上面的 right bottom background-position 属性的默认值为 0 0 或 top left, 即背景图像位于元素的左上角

17 } 保存 HTML 文件, 刷新网页, 效果如图 4-18 所示, 背景图像出现在页面的右下角在 CSS 中,background-position 属性的值通常设置为两个, 中间用空格隔开, 用于定义背景图像在元素的水平和垂直方向的坐标, 例如上面的 right bottom background-position 属性的默认值为 0 0 或 top left, 即背景图像位于元素的左上角 background-position 属性的取值有多种, 具体如下 : (1) 使用不同单位 ( 最常用的是像素 px) 的数值 : 直接设置图像左上角在元素中的坐标, 例如 background-position:20px 20px; (2) 使用预定义的关键字 : 指定背景图像在元素中的对齐方式水平方向值 :left center right 垂直方向值 :top center bottom 两个关键字的顺序任意, 若只有一个值则另一个默认为 center 例如: center 相当于 center center( 居中显示 ) top 相当于 top center 或 center top( 水平居中上对齐 ) (3) 使用百分比 : 按背景图像和元素的指定点对齐 0% 0% 表示图像左上角与元素的左上角对齐 50% 50% 表示图像 50% 50% 中心点与元素 50% 50% 的中心点对齐 20% 30% 表示图像 20% 30% 的点与元素 20% 30% 的点对齐 100% 100% 表示图像右下角与元素的右下角对齐, 而不是图像充满元素如果只有一个百分数, 将作为水平值, 垂直值则默认为 50% 接下来将 background-position 的值定义为像素值, 来控制例 4-8 中背景图像的位置,body 元素的 CSS 样式代码如下 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ } 保存 HTML 页面, 再次刷新网页, 效果如图 4-19 所示图 4-19 控制背景图像的位置在图 4-19 中, 图像距离 body 元素的左边缘为 50px, 距离上边缘为 80px 5 设置背景图像固定在网页上设置背景图像时, 随着页面滚动条的移动, 背景图像也会跟着一起移动, 如图 4-20 所示 17

图 4-20 背景图像随着页面一起移动如果希望背景图像固定在屏幕上, 不随着页面元素滚动, 可以使用 background-attachment 属性来设置, 其属性值如下 : scroll:

用像素值控制背景图像的位置 */ background-attachment:fixed; /* 设置背景图像的位置固定 */ } 这时运行例 4-8, 效果如图 4-21 所示图 4-21

18 图 4-20 背景图像随着页面一起移动如果希望背景图像固定在屏幕上, 不随着页面元素滚动, 可以使用 background-attachment 属性来设置, 其属性值如下 : scroll: 图像随页面元素一起滚动 ( 默认值 ) fixed: 图像固定在屏幕上, 不随页面元素滚动接下来控制例 4-8 中的背景图像, 使其固定在屏幕上,body 元素的 CSS 样式代码如下 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ background-attachment:fixed; /* 设置背景图像的位置固定 */ } 这时运行例 4-8, 效果如图 4-21 所示图 4-21 设置背景图像固定在图 4-21 所示的页面中, 无论如何拖动浏览器的滚动条, 背景图像的位置都固定不变 6 综合设置元素的背景同边框属性一样, 在 CSS 中背景属性也是一个复合属性, 可以将背景相关的样式都综合定义在一个复合属性 background 中使用 background 属性综合设置背景样式的语法格式如下 : background: 背景色 url(" 图像 ") 平铺定位固定 ; 18

19 在上面的语法格式中, 各个样式顺序任意, 中间用空格隔开, 不需要的样式可以省略但实际工作中通常按照背景色 url(" 图像 ") 平铺定位固定的顺序来书写例如, 例 4-8 中 <body> 的背景可以综合设置为 : background: url(img/wdjl.jpg) no-repeat 50px 80px fixed; 这时省略了背景颜色样式, 等价于 : body{ background-image:url(img/wdjl.jpg); /* 设置网页的背景图像 */ background-repeat:no-repeat; /* 设置背景图像不平铺 */ background-position:50px 80px; /* 用像素值控制背景图像的位置 */ } background-attachment:fixed; /* 设置背景图像的位置固定 */ 盒子的宽与高网页是由多个盒子排列而成的, 每个盒子都有固定的大小, 在 CSS 中使用宽度属性 width 和高度属性 height 可以对盒子的大小进行控制 width 和 height 的属性值可以为不同单位的数值或相对于父元素的百分比 %, 实际工作中最常用的是像素值了解了盒子的 width 和 height 属性, 接下来通过他们来控制网页中的段落, 如例 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.box{ 9 width:200px; /* 设置段落的宽度 */ 10 height:80px; /* 设置段落的高度 */ 11 background:#ccc; /* 设置段落的背景颜色 */ 12 border:8px solid #F00; /* 设置段落的边框 */ 13 padding:15px; /* 设置段落的内边距 */ 14 margin:20px; /* 设置段落的外边距 */ 15 } 16 </style> 17 </head> 18 <body> 19 <p class="box"> 这是一个盒子 </p> 20 </body> 21 </html> 在例 4-9 中, 通过 width 和 height 属性分别控制段落的宽度和高度, 同时对段落应用了盒子模型的其他相关属性, 例如边框内边距外边距等 19

运行例 4-9, 效果如图 4-22 所示图 4-22 控制盒子的宽度与高度在例 4-22 所示的盒子中, 如果问盒子的宽度是多少, 初学者可能会不假思索地说是 200px 实际上这是不正确的, 因为 CSS 规范中, 元素的 width 和 height 属性仅指块级元素内容的宽度和高度, 其周围的内边距边框和外边距是另外计算的大多数浏览器, 如 Firefox IE6

20 运行例 4-9, 效果如图 4-22 所示图 4-22 控制盒子的宽度与高度在例 4-22 所示的盒子中, 如果问盒子的宽度是多少, 初学者可能会不假思索地说是 200px 实际上这是不正确的, 因为 CSS 规范中, 元素的 width 和 height 属性仅指块级元素内容的宽度和高度, 其周围的内边距边框和外边距是另外计算的大多数浏览器, 如 Firefox IE6 及以上版本都采用了 W3C 规范, 符合 CSS 规范的盒子模型的总宽度和总高度的计算原则是 : 盒子的总宽度 = width+ 左右内边距之和 + 左右边框宽度之和 + 左右外边距之和盒子的总高度 = height+ 上下内边距之和 + 上下边框宽度之和 + 上下外边距之和注意 : 1 宽度属性 width 和高度属性 height 仅适用于块级元素, 对行内元素无效 (<img /> 标记和 <input /> 除外 ) 2 计算盒子模型的总高度时, 还应考虑上下两个盒子垂直外边距合并的情况, 详见 4.4 小节 4.3 元素的类型与转换在前面的章节中介绍 CSS 属性时, 经常会提到仅适用于块级元素, 那么究竟什么是块级元素, 在 HTML 标记语言中元素又是如何分类的呢? 接下来, 本小节将对元素的类型与转换进行详细地讲解元素的类型 HTML 标记语言提供了丰富的标记, 用于组织页面结构为了使页面结构的组织更加轻松合理,HTML 标记被定义成了不同的类型, 一般分为块标记和行内标记, 也称块元素和行内元素了解他们的特性可以为使用 CSS 设置样式和布局打下基础, 具体如下 : 块元素块元素在页面中以区域块的形式出现, 其特点是, 每个块元素通常都会独自占据一整行或多整行, 可以对其设置宽度高度对齐等属性, 常用于网页布局和网页结构的搭建常见的块元素有 <h1>~<h6> <p> <div> <ul> <ol> <li> 等, 其中 <div> 标记是最典型的块元素行内元素行内元素也称内联元素或内嵌元素, 其特点是, 不必在新的一行开始, 同时, 也不强迫其他的元素在新的一行显示一个行内元素通常会和他前后的其他行内元素显示在同一行中, 他们不占有独立的区域, 仅仅靠自身的字体大小和图像尺寸来支撑结构, 一般不可以设置宽度高度对齐等属性, 常用于控制页面中文本的样式 20

21 常见的行内元素有 <strong> <b> <em> <i> <del> <s> <ins> <u> <a> <span> 等, 其中 <span> 标记最典型的行内元素为了使初学者更清晰地认识块元素与行内元素, 接下来来看一个具体的案例, 如例 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 h2{ /* 定义 h2 的背景颜色宽度高度文本水平对齐方式 */ 9 background:#fcc; 10 width:350px; 11 height:50px; 12 text-align:center; 13 } 14 p{background:#090;} /* 定义 p 的背景颜色 */ 15 strong{ /* 定义 strong 的背景颜色宽度高度文本水平对齐方式 */ 16 background:#fcc; 17 width:360px; 18 height:50px; 19 text-align:center; 20 } 21 em{background:#ff0;} /* 定义 em 的背景颜色 */ 22 del{background:#ccc;} /* 定义 del 的背景颜色 */ 23 </style> 24 </head> 25 <body> 26 <h2>h2 标记定义的文本 </h2> 27 <p>p 标记定义的文本 </p> 28 <strong>strong 标记定义的文本 </strong> 29 <em>em 标记定义的文本 </em> 30 <del>del 标记定义的文本 </del> 31 </body> 32 </html> 在例 4-10 中, 首先使用块标记 <h2> <p> 和行内标记 <strong> <em> <del> 定义文本, 然后对他们应用不同的背景颜色, 同时, 对 <h2> 和 <strong> 应用相同的宽度高度和对齐属性运行例 4-10, 效果如图 4-23 所示 21

图 4-23 块元素和行内元素的显示效果从图 4-23 可以看出不同类型的元素在页面中所占的区域不同块元素 <h2> 和 <p> 各自占据一个矩形的区域, 虽然 <h2> 和 <p> 相邻, 但是他们不会排在同一行中, 而是依次竖直排列, 其中, 设置了宽高和对齐属性的 <h2> 按设置的样式显示, 未设置宽高和对齐属性的 <p> 则左右撑满页面然而行内元素

代码如下 : <p> <strong>strong 标记定义的文本 </strong> <em>em 标记定义的文本 </em> <del>del 标记定义的文本 </del> </p> 保存 HTML 文件, 刷新网页, 效果如图 4-24 所示图 4-24 行内元素嵌套在块元素中从图 4-24 可以看出, 当行内元素嵌套在块元素中时, 就会在块元素上占据一定的范围,

22 图 4-23 块元素和行内元素的显示效果从图 4-23 可以看出不同类型的元素在页面中所占的区域不同块元素 <h2> 和 <p> 各自占据一个矩形的区域, 虽然 <h2> 和 <p> 相邻, 但是他们不会排在同一行中, 而是依次竖直排列, 其中, 设置了宽高和对齐属性的 <h2> 按设置的样式显示, 未设置宽高和对齐属性的 <p> 则左右撑满页面然而行内元素 <strong> <em> 和 <del> 排列在同一行, 遇到边界则自动换行, 虽然对 <strong> 设置了和 <h2> 相同的宽高和对齐属性, 但是在实际的显示效果中并不会生效值得一提的是, 行内元素通常嵌套在块元素中使用, 而块元素却不能嵌套在行内元素中例如, 可以将例 4-10 中的 <strong> <em> 和 <del> 嵌套在 <p> 标记中, 代码如下 : <p> <strong>strong 标记定义的文本 </strong> <em>em 标记定义的文本 </em> <del>del 标记定义的文本 </del> </p> 保存 HTML 文件, 刷新网页, 效果如图 4-24 所示图 4-24 行内元素嵌套在块元素中从图 4-24 可以看出, 当行内元素嵌套在块元素中时, 就会在块元素上占据一定的范围, 成为块元素的一部分总结例 4-10 可以得出, 块元素通常独占一行 ( 逻辑行 ), 可以设置宽高和对齐属性, 而行内元素通常不独占一行, 不可以设置宽高和对齐属性行内元素可以嵌套在块元素中, 而块元素不可以嵌套在行内元素中注意 : 在行内元素中有几个特殊的标记 <img /> <input /> <td>, 可以对他们设置宽高和对齐属性, 有些资料可能会称他们为行内块元素 22

23 4.3.2 <div> 与 <span> 标记为了更好地理解块元素和行内元素, 本小节将详细介绍在 CSS 布局的页面中经常使用的块元素 <div> 和行内元素 <span>, 具体如下 : 1 <div> 标记 div 是英文 division 的缩写, 意为分割区域 <div> 标记简单而言就是一个区块容器标记, 可以将网页分割为独立的不同的部分, 以实现网页的规划和布局 <div> 与 </div> 之间相当于一个容器, 可以容纳段落标题表格图像等各种网页元素, 也就是说大多数 HTML 标记都可以嵌套在 <div> 标记中,<div> 中还可以嵌套多层 <div> <div> 标记非常强大, 通过与 id class 等属性配合, 然后使用 CSS 设置样式, 可以替代大多数的块级文本标记上面对 <div> 标记有了一定的了解, 接下来通过一个案例来演示其用法, 如例 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>div 标记 </title> 7 <style type="text/css"> 8.one{ 9 width:450px; /* 设置宽度 */ 10 height:30px; /* 设置高度 */ 11 line-height:30px; /* 设置行高 */ 12 background:#fcc; /* 设置背景颜色 */ 13 font-size:18px; /* 设置字体大小 */ 14 font-weight:bold; /* 设置字体加粗 */ 15 text-align:center; /* 设置文本水平居中对齐 */ 16 } 17.two{ 18 width:450px; /* 设置宽度 */ 19 height:100px; /* 设置高度 */ 20 background:#0f0; /* 设置背景颜色 */ 21 font-size:14px; /* 设置字体大小 */ 22 text-indent:2em; /* 设置首行文本缩进 */ 23 } 24 </style> 25 </head> 26 <body> 27 <div class="one"> 28 用 div 标记设置的标题文本 29 </div> 23

30 <div class="two"> 31 <p>div 标记中嵌套的 p 标记中的文本 </p> 32 </div> 33 </body> 34 </html> 在例 4-11 中, 定义了两对 <div>, 其中一对 <div> 中嵌套段落标记 <p> 对两对 <div> 分别应用 class 属性, 然后通过 CSS 控制其样式运行例 4-11, 效果如图 4-25 所示图

24 30 <div class="two"> 31 <p>div 标记中嵌套的 p 标记中的文本 </p> 32 </div> 33 </body> 34 </html> 在例 4-11 中, 定义了两对 <div>, 其中一对 <div> 中嵌套段落标记 <p> 对两对 <div> 分别应用 class 属性, 然后通过 CSS 控制其样式运行例 4-11, 效果如图 4-25 所示图 4-25 块元素 div 示例从图 4-25 可以看出, 通过对 <div> 标记设置相应的 CSS 样式可以实现标题标记 <h2> 的效果并且当对 <div> 进行控制时, 其中的 <p> 标记会随之改变注意 : 1 <div> 标记最大的意义在于和浮动属性 float 配合, 实现网页的布局, 这就是常说的 DIV+CSS 网页布局对于浮动和布局这里了解即可, 后面的章节将会详细介绍 2 <div> 可以替代块级元素如 <h> <p> 等, 但是他们在语义上有一定的区别例如 <div> 和 <h2> 的不同在于,<h2> 具有特殊的含义, 语义较重, 代表着标题, 而 <div> 是一个通用的块级元素, 主要用于布局 2 <span> 标记与 <div> 一样,<span> 也作为容器标记被广泛应用在 HTML 语言中和 <div> 标记不同的是 <span> 是行内元素,<span> 与 </span> 之间只能包含文本和各种行内标记, 如加粗标记 <strong> 倾斜标记 <em> 等, <span> 中还可以嵌套多层 <span> <span> 标记常用于定义网页中某些特殊显示的文本, 配合 class 属性使用他本身没有固定的格式表现, 只有应用样式时, 才会产生视觉上的变化当其他行内标记都不合适时, 就可以使用 <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 #header{ /* 设置当前 div 中文本的通用样式 */ 9 font-family:" 黑体 "; 10 font-size:14px; 24

25 11 color:#515151; 12 } 13 #header.kaixue{ /* 控制第 1 个 span 中的特殊文本 */ 14 color:#0174c7; 15 font-size:20px; 16 padding-right:20px; 17 } 18 #header.chuanzhi{ /* 控制第 2 个 span 中的特殊文本 */ 19 color:#0174c7; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="header"> 25 <span class="kaixue"> 我们开学啦 </span> 今天我终于来到了心中向往已久的神圣学府 --<span class="chuanzhi"> 传智播客 </span>, 开始了改变命运的征途 26 </div> 27 </body> 28 </html> 在例 4-12 中, 使用 <div> 标记定义一些文本, 并且在 <div> 中嵌套两对 <span>, 用于控制某些特殊显示的文本, 然后使用 CSS 分别设置他们的样式运行例 4-12, 效果如图 4-26 所示图 4-26 行内元素 span 示例在图 4-26 中, 特殊显示的文本我们开学啦和传智播客, 都是通过 CSS 控制 <span> 标记设置的由例 4-12 可以看出,<span> 标记可以嵌套于 <div> 标记中, 成为他的子元素, 但是反过来则不成立, 即 <span> 标记中不能嵌套 <div> 标记从 <div> 和 <span> 之间的区别和联系, 可以更深刻的理解块元素和行内元素元素的转换网页是由多个块元素和行内元素构成的盒子排列而成的如果希望行内元素具有块元素的某些特性, 例如可以设置宽高, 或者需要块元素具有行内元素的某些特性, 例如不独占一行排列, 可以使用 display 属性对元素的类型进行转换 display 属性常用的属性值及含义如下 : inline: 此元素将显示为行内元素 ( 行内元素默认的 display 属性值 ) block: 此元素将显示为块元素 ( 块元素默认的 display 属性值 ) 25

26 inline-block: 此元素将显示为行内块元素, 可以对其设置宽高和对齐等属性, 但是该元素不会独占一行 none: 此元素将被隐藏, 不显示, 也不占用页面空间, 相当于该元素不存在使用 display 属性可以对元素的类型进行转换, 使元素以不同的方式显示接下来通过一个案例来演示 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,span{ /* 同时设置 div 和 span 的样式 */ 9 width:200px; /* 宽度 */ 10 height:50px; /* 高度 */ 11 background:#fcc; /* 背景颜色 */ 12 margin:10px; /* 外边距 */ 13 } 14.d_one,.d_two{ display:inline;} /* 将前两个 div 转换为行内元素 */ 15.s_one{ display:inline-block;} /* 将第一个 span 转换为行内块元素 */ 16.s_three{ display:block;} /* 将第三个 span 转换为块元素 */ 17 </style> 18 </head> 19 <body> 20 <div class="d_one"> 第一个 div 中的文本 </div> 21 <div class="d_two"> 第二个 div 中的文本 </div> 22 <div class="d_three"> 第三个 div 中的文本 </div> 23 <span class="s_one"> 第一个 span 中的文本 </span> 24 <span class="s_two"> 第二个 span 中的文本 </span> 25 <span class="s_three"> 第三个 span 中的文本 </span> 26 </body> 27 </html> 在例 4-13 中, 定义了三对 <div> 和三对 <span> 标记, 为他们设置相同的宽度高度背景颜色和外边距同时, 对前两个 <div> 应用 display:inline; 样式, 使他们从块元素转换为行内元素, 对第一个和第三个 <span> 分别应用 display: inline-block; 和 display:inline; 样式, 使他们分别转换为行内块元素和行内元素运行例 4-13, 效果如图 4-27 所示 26

图 4-27 元素的转换从图 4-27 可以看出, 前两个 <div> 排列在了同一行, 靠自身的文本内容支撑其宽高, 这是因为他们被转换成了行内元素而第一个和第三个 <span> 则按固定的宽高显示, 不同的是前者不会独占一行, 后者独占一行, 这是因为他们分别被转换成了行内块元素和块元素在上面的例子中, 使用 display 的相关属性值, 可以实现块元素行内元素和行内块元素之间的转换

$d_three{ display:none;} /* 隐藏第三个 div*/ 保存 HTML 页面, 刷新网页, 效果如图 4-28 所示图 4-28 定义 display 为 none 后的效果从图 4-28 可以看出, 当定义元素的 display 属性为 none 时, 该元素将从页面消失, 不再占用页面空间元素的 display:none; 和 display:block; 样式,$

27 图 4-27 元素的转换从图 4-27 可以看出, 前两个 <div> 排列在了同一行, 靠自身的文本内容支撑其宽高, 这是因为他们被转换成了行内元素而第一个和第三个 <span> 则按固定的宽高显示, 不同的是前者不会独占一行, 后者独占一行, 这是因为他们分别被转换成了行内块元素和块元素在上面的例子中, 使用 display 的相关属性值, 可以实现块元素行内元素和行内块元素之间的转换如果希望某个元素不被显示, 还可以使用 display:none; 进行控制例如, 希望上面例子中的第三个 <div> 不被显示, 可以在 CSS 代码中增加如下样式 :.d_three{ display:none;} /* 隐藏第三个 div*/ 保存 HTML 页面, 刷新网页, 效果如图 4-28 所示图 4-28 定义 display 为 none 后的效果从图 4-28 可以看出, 当定义元素的 display 属性为 none 时, 该元素将从页面消失, 不再占用页面空间元素的 display:none; 和 display:block; 样式, 常常与 JavaScript 脚本一起使用, 用于制作默认隐藏鼠标悬浮时显示的菜单效果对于初学者, 了解即可注意 : 仔细观察图 4-27 可以发现, 前两个 <div> 与第三个 <div> 之间的垂直外边距, 并不等于前两个 <div> 的 margin-bottom 与第三个 <div> 的 margin-top 之和这是因为前两个 <div> 被转换成了行内元素, 而行内元素只可以定义左右外边距, 定义上下外边距时无效 4.4 块元素垂直外边距的合并在普通文档流中 ( 没有对元素应用浮动和定位 ), 当两个相邻或嵌套的块元素相遇时, 其垂直方向的外边距会自动合并, 发生重叠了解块元素的这一特性, 有助于更好地使用 CSS 进行网页布局, 接下来, 本小节将针对块元素垂直外边距的合并进行详细地讲解 27

4.4.1 相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时, 如果上面的元素有下外边距 margin-bottom, 下面的元素有上外边距 margin-top, 则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和, 而是两者中的较大者这种现象被称为相邻块元素垂直外边距的合并 ( 也称外边距塌陷 ) 为了更好地理解相邻块元素垂直外边距的合并,

28 4.4.1 相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时, 如果上面的元素有下外边距 margin-bottom, 下面的元素有上外边距 margin-top, 则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和, 而是两者中的较大者这种现象被称为相邻块元素垂直外边距的合并 ( 也称外边距塌陷 ) 为了更好地理解相邻块元素垂直外边距的合并, 接下来来看一个具体的案例, 如例 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:200px; 10 height:60px; 11 background:#fcc; 12 } 13.one{ margin-bottom:20px;} /* 定义第一个 div 的下外边距 */ 14.two{ margin-top:40px;} /* 定义第二个 div 的上外边距 */ 15 </style> 16 </head> 17 <body> 18 <div class="one"> 第一个 div</div> 19 <div class="two"> 第二个 div</div> 20 </body> 21 </html> 在例 4-14 中, 定义了两对 <div>, 为他们设置相同的宽度高度和背景颜色, 同时, 为第一个 <div> 定义下外边距 margin-bottom:20px;, 为第二个 <div> 定义上外边距 margin-top:40px; 运行例 4-14, 效果如图 4-29 所示图 4-29 相邻块元素垂直外边距的合并 28

29 在图 4-29 中, 两个 <div> 之间的垂直间距并不是第一个 <div> 的 margin-bottom 与第二个 <div> 的 margin-top 之和 60px 如果用测量工具测量可以发现, 两者之间的垂直间距是 40px, 即为 margin-bottom 与 margin-top 中的较大者嵌套块元素垂直外边距的合并对于两个嵌套关系的块元素, 如果父元素没有上内边距及边框, 则父元素的上外边距会与子元素的上外边距发生合并, 合并后的外边距为两者中的较大者, 即使父元素的上外边距为 0, 也会发生合并为了更好地理解嵌套块元素垂直外边距的合并, 接下来来看一个具体的案例, 如例 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 *{ margin:0; padding:0;} /* 将所有元素的默认内外边距归零 */ 9 div.father{ 10 width:300px; 11 height:150px; 12 background:#fcc; 13 margin-top:20px; /* 定义父 div 的上外边距 */ 14 } 15 div.son{ 16 width:150px; 17 height:75px; 18 background:#090; 19 margin-top:40px; /* 定义子 div 的上外边距 */ 20 } 21 </style> 22 </head> 23 <body> 24 <div class="father"> 25 <div class="son"></div> 26 </div> 27 </body> 28 </html> 在例 4-15 中, 定义了两对 <div>, 他们是嵌套的父子关系, 分别为其设置宽度高度背景颜色和上外边距, 其中父 <div> 的上外边距为 20px, 子 <div> 的上外边距为 40px 为了便于观察, 在第 8 行代码中, 使用通配符选择器将所有元素的默认内外边距归零运行例 4-15, 效果如图 4-30 所示 29

图 4-30 嵌套块元素上外边距的合并在图 4-30 中, 父 <div> 与子 <div> 的上边缘重合, 这是因为他们的外边距发生了合并如果使用测量工具测量可以发现, 这时的外边距为 40px, 即取父 <div> 与子 <div> 上外边距中的较大者如果希望外边距不合并, 可以为父元素定义 1 像素的上边框或上内边距这里以定义父元素的上边框为例, 在父 <div> 的 CSS

30 图 4-30 嵌套块元素上外边距的合并在图 4-30 中, 父 <div> 与子 <div> 的上边缘重合, 这是因为他们的外边距发生了合并如果使用测量工具测量可以发现, 这时的外边距为 40px, 即取父 <div> 与子 <div> 上外边距中的较大者如果希望外边距不合并, 可以为父元素定义 1 像素的上边框或上内边距这里以定义父元素的上边框为例, 在父 <div> 的 CSS 样式中增加如下代码 : border-top:1px solid #FCC; /* 定义父 div 的上边框 */ 保存 HTML 文件, 刷新网页, 效果如图 4-31 所示图 4-31 父元素有上边框时外边距不合并在图 4-31 中, 父 <div> 与浏览器上边缘的垂直间距为 20px, 子 <div> 与父 <div> 上边缘的垂直间距为 40px, 也就是说这时外边距正常显示, 没有发生合并需要注意的是, 在上图中, 边框颜色和父 <div> 的背景颜色一样, 所以在实际显示效果中好像边框不存在一样上面了解了嵌套块元素之间上外边距的合并情况值得一提的是, 他们的下外边距也有可能发生合并如果父元素没有设置高度及自适应子元素的高度, 同时, 也没有对其定义上内边距及上边框, 则父元素与子元素的下外边距会发生合并这就是所谓父元素不适应子元素高度的问题, 这里了解即可, 在后面的章节中将会详细介绍 4.5 阶段案例制作音乐盒本章前几个小节重点讲解了盒子模型的概念盒子相关属性以及元素的类型和转换为了使初学者更熟练地运用盒子模型相关属性控制页面中的各个元素, 本小节将通过案例的形式分步骤制作网页中常见的音乐盒, 其效果如图 4-32 所示 30

31 图 4-32 常见的盒子效果分析效果图为了提高网页制作的效率, 每拿到一个页面的效果图时, 都应当对其结构和样式进行分析, 下面对效果图 4-32 进行分析 1 结构分析如果把各个元素都看成一个个具体的盒子, 则效果图所示的页面由多个盒子构成其嵌套结构如图 4-33 所示最外层的大盒子 (div) 左侧大盒子 (div) 左侧内部盒子 (div) 右侧大盒子 (div) 右侧内部盒子 (div) 图像构成的盒子 (img) 图像构成的盒子 (img) 段落构成的盒子 (p) 段落中的小盒子 1 (span) 段落中的小盒子 2 (span) 段落构成的盒子 (p) 段落中的小盒子 1 (span) 段落中的小盒子 2 (span) 图 4-33 页面结构图在图 4-33 所示的结构图中, 图像构成的盒子可以通过 <img /> 标记来定义, 段落构成的盒子通过 <p> 标记定义, 段落中的小盒子用来控制某些特殊显示的文本, 可以通过 <span> 标记定义, 页面中其他的盒子都可以通过 <div> 标记进行定义其中, 最外层的大盒子用于对页面的整体控制, 左侧大盒子和右侧大盒子分别用于对左侧元素和右侧元素的整体控制这种整体控制的布局思想在实际工作中非常常用 2 样式分析观察效果图 4-32, 容易看出左半部分与右半部分的样式基本相同, 对于这样的页面, 我们只需分析其中一部分的样式即可这里以左半部分为例, 对左侧大盒子及其子元素的样式进行分析, 如图 4-34 所示 31

32 左侧大盒子 (div) 左侧内部盒子 (div) 图像构成的盒子 (img) 和右侧大盒子排列在同一行, 需要设置浮动 (float) 宽度 (width) 高度 (height) 固定, 有边框 (border) 和内边距 (padding) 图像宽度 (width) 高度 (height) 固定段落构成的盒子 (p) 段落中的小盒子 1 (span) 段落中的小盒子 2 (span) 段落字号 (font-size) 颜色 (color) 固定, 有高度 (height) 行高 (line-height) 背景图像 (background) 横线颜色 (color) 固定, 并且有水平边距 (padding) 段落中的某些文本字号 (font-size) 较小图 4-34 左半部分样式分析图由于右侧大盒子及其子元素与左侧大盒子及其子元素的样式相同, 所以只需对他们分别应用相同的类即可最外层的大盒子用于对页面的整体控制, 可以对其设置宽度 (width), 并使用外边距属性 (margin) 使他在浏览器中水平居中, 上下和浏览器的边缘有一定的距离这样元素将不会紧贴浏览器边缘, 便于观察制作页面结构根据上面的分析, 可以使用相应的 HTML 标记来搭建网页结构, 如例 4-16 所示例 4-16 example16.html 29 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 30 " 31 <html xmlns=" 32 <head> 33 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 34 <title> 制作常见的盒子模型 </title> 35 </head> 36 <body> 37 <div class="all">  38 <div class="out left">  39 <div class="inner">  40 <img src="img/music1.jpg" alt=" 传智之歌 " /> 41 </div> 42 <p class="text"> 43 传智之歌 <span class="line">-</span><span class="font12"> 学工部 </span> 44 </p> 45 </div> 46 <div class="out">  47 <div class="inner">  32

33 48 <img src="img/music2.jpg" alt=" 无悔的青春 " /> 49 </div> 50 <p class="text"> 51 无悔的青春 <span class="line">-</span><span class="font12"> 传智学员 </span> 52 </p> 53 </div> 54 </div> 55 </body> 56 </html> 在例 4-16 中, 通过多对 <div> 标记定义外层的盒子, 他们层层嵌套内部的图像段落段落中的特殊文本, 则通过相应的 <img /> 标记 <p> 标记 <span> 标记进行控制运行例 4-16, 效果如图 4-35 所示图 4-35 HTML 结构页面效果定义 CSS 样式搭建完页面的结构后, 接下来根据小节中的样式分析, 使用 CSS 对页面进行修饰这里使用内嵌式 CSS 样式表, 具体代码如下 : <style type="text/css"> *{ padding:0; margin:0;} /* 将所有元素的默认内外边距归零 */.all{ width:356px; } margin:20px auto; /* 使最外层的大盒子水平居中距离浏览器上下边缘有一定的距离 */.out{float:left;} /* 定义左右侧的大盒子左浮动 */.inner{ /* 控制左右侧内部包含图像的盒子 */ width:160px; height:90px; border:1px solid #CCC; padding:4px; 33

}.text{ /* 控制左右侧段落的样式 */ font-size:14px; color:#2c60ce; height:30px; line-height:30px; } background:url(img/play.png) no-repeat right; /* 定义段落的背景图像 */.font12{ font-size:12px;} /* 控制段落中字号较小的文本 */.

34 }.text{ /* 控制左右侧段落的样式 */ font-size:14px; color:#2c60ce; height:30px; line-height:30px; } background:url(img/play.png) no-repeat right; /* 定义段落的背景图像 */.font12{ font-size:12px;} /* 控制段落中字号较小的文本 */.line{ /* 控制段落中的横线 */ color:#ccc; padding:0 5px; } </style> 保存 HTML 文件, 刷新页面, 效果如图 4-36 所示图 4-36 CSS 控制样式图 4-36 和效果图 4-32 已经很接近了, 但是左侧的大盒子和右侧的大盒子紧贴在一起, 要想拉开他们之间的距离, 可以给左侧的大盒子单独应用一个类, 例如 left, 并为其设置右外边距 margin-right,css 代码如下 :.left{ margin-right:16px;} /* 定义左侧大盒子的右外边距 */ 保存 HTML 文件, 刷新页面, 效果如图 4-37 所示图 4-37 拉开左右大盒子的距离在图 4-37 中, 左侧大盒子和右侧大盒子之间拉开了一定的距离, 实现了效果图 4-32 所示的页面效果至此, 我们就通过盒子模型的相关属性控制页面中各个元素, 实现了网页中常见的音乐盒效果注意 : 在步骤 4 的 CSS 代码中, 使用了浮动属性 float, 这里了解即可, 后面的章节中将会详细介绍 34

35 4.6 本章小结本章首先介绍了盒子模型的概念, 与盒子模型相关的属性, 然后讲解了块元素行内元素, 最常用的块元素 <div> 与行内元素 <span>, 以及元素类型的转换, 最后制作出了一个常见的盒子模型效果通过本章的学习, 读者应该能够熟悉盒子模型的构成, 熟练运用盒子模型相关属性控制网页中的元素, 理解块元素与行内元素的区别, 掌握 <div> 标记与 <span> 标记的使用 35

博学谷让 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 网页布局的基础, 只有掌握了盒子模型的各种规律和特征,