《网页设计与制作（活页式）》 课件 项目4 盒子模型

网页设计与制作项目四

盒子模型N

知识目标理解盒子模型的概念掌握盒子模型的相关属性熟悉标签的类型与转换4.1.1盒子模型的概念任务4.1认识盒子模型盒子模型是指把HTML5页面中的元素看作矩形的盒子，每个矩形都是由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成的。实例1认识盒子模型4.1.1盒子模型的概念任务4.1认识盒子模型在<body>标签中使用<div>标签定义了一个盒子“box”，并对“box”设置了若干属性。4.1.1盒子模型的概念任务4.1认识盒子模型div是英文division的缩写，意为分割、分开。<div>标签就是一个区块容器标签，简称块标签，块通常称为盒子。块标签可以容纳段落、标题、表格、图像等各种网页元素。<div>标签可以嵌套<div>标签。实际上DIV+CSS布局就是将网页内容放入若干<div>标签中，并使用CSS设置这些<div>标签的属性。4.1.1盒子模型的概念任务4.1认识盒子模型盒子模型结构一个盒子实际所占有的宽度（或高度）是由“内容+内边距+边框+外边距”组成的。因此，实例1中定义的盒子box的实际宽度和高度均是310px。4.1.1盒子模型的概念任务4.1认识盒子模型<div>标签的属性和含义4.1.1盒子模型的概念任务4.1认识盒子模型注意：（1）事实上所有的网页元素本质上都是以盒子的形式存在的。例如，<body><P><h1~h6><ul><li>等元素都是盒子，这些元素都有默认的盒子属性值。（2）给盒子添加背景色或背景图像时，该元素的背景色或背景图像将出现在内边距中。（3）虽然每个盒子模型都拥有内边距、边框、外边距、宽和高这些基本属性，但是并不要求每个元素都必须定义这些属性。任务1.3〓网页制作工具任务4.1认识盒子模型4.1.2盒子模型的相关属性border-top：上边框宽度样式颜色border-right：右边框宽度样式颜色border-bottom：下边框宽度样式颜色border-left：左边框宽度样式颜色若四个边框具有相同的宽度、样式和颜色，则可以设置如下：border：边框宽度样式颜色1.边框属性任务1.3〓网页制作工具任务4.1认识盒子模型4.1.2盒子模型的相关属性padding-top：上内边距大小padding-right：右内边距大小padding-bottom：下内边距大小padding-left：左内边距大小若四个内边距具有相同的大小，则可以设置如下：padding：内边距大小2.内边距属性任务1.3〓网页制作工具任务4.1认识盒子模型4.1.2盒子模型的相关属性margin-top：上外边距大小margin-right：右外边距大小margin-bottom：下外边距大小margin-left：左外边距大小若四个外边距具有相同的大小，则可以设置如下：margin：外边距大小3.外边距属性任务1.3〓网页制作工具任务4.1认识盒子模型4.1.3CSS设置背景设置背景颜色的格式如下：background-color：#RRGGBB|#rgb(r，g，b)|预定义的颜色值1.设置背景颜色任务1.3〓网页制作工具任务4.1认识盒子模型4.1.3CSS设置背景实例2设置背景颜色任务1.3〓网页制作工具任务4.1认识盒子模型4.1.3CSS设置背景2.设置背景图像设置背景颜色的格式如下：background-image：url（图像）任务1.3〓网页制作工具任务4.1认识盒子模型4.1.3CSS设置背景实例3设置背景图像

修改实例2中的代码，设置网页的背景图像。默认情况下，背景图像在元素的左上角，并自动沿着水平和竖直两个方向平铺，充满整个网页任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型1.块标签块标签在页面中以区域块的形式出现，其特点是每个块标签通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。

常见的块标签有<p>

<div>

<ul>

<ol>

<li>等，其中<div>标签是典型的块标签。任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型2.行内标签行内标签也称为内联标签或内嵌标签，其特点是不必在新的一行开始，同时，也不要求其他标签必须在新的一行开始。行内标签一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型常见的行内标签有<strong><b><em><i><a><span>等，其中<span>标签是典型的行内标签。2.行内标签任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型<span>标签与<div>标签一样，它作为容器标签而被广泛应用在HTML5中。在<span>与</span>中间同样可以容纳各种HTML标签，从而形成独立的对象。2.行内标签任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型<div>与<span>的区别在于<div>是一个块标签，它包围的标签会自动换行，而<span>仅仅是一个行内标签，在它的前后不会换行。<span>没有结构上的意义，纯粹是应用样式，当其他行内标签都不合适时，就可以使用<span>标签。下面举例说明<span>标签的使用。2.行内标签任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型实例4使用<span>标签创建网页，在源文件中添加<span>标签，设置CSS样式使<span>标签中的文字为红色任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.2标签的转换网页是由多个块标签和行内标签构成的盒子排列而成的。如果希望行内标签具有块标签的某些特性或者需要块标签具有行内标签的某些特性，同时希望不独占一行排列，则可以使用display属性对标签的类型进行转换。任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.2标签的转换display属性常用的属性值及含义任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.3块标签间的外边距当上下相邻的两个块标签相遇时，如果上面的标签有下外边距margin-bottom，下面的标签有上外边距margin-top，则它们之间的垂直间距不是两者的和，而是两者中的较大者。1.块标签间的垂直外边距任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.3块标签间的外边距实例5块标签间的垂直外边距创建网页，在网页中定义两个块，并设置它们的外边距实例5定义了第一个块的下外边距为10px，定义了第二个块的上外边距为30px，此时两个块之间的垂直间距为30px，即为margin-bottom和marign-top中的较大者。任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.3块标签间的外边距当两个相邻的块标签水平排列时，如果左面的标签有右外边距margin-right，右面的标签有左外边距margin-left，则它们之间的水平间距是两者的和。2.块标签间的水平外边距任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.3块标签间的外边距实例6块标签间的水平外边距本例定义了第一个块的右外边距为10px，定义了第二个块的左外边距为30px，此时两个块之间的水平间距是40px，即为marign-right和marign-left的和。任务1.3〓网页制作工具任务4.3综合案例——制作苏轼简介页面任务1.3〓网页制作工具任务4.3综合案例——制作苏轼简介页面项目小结本项