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

网页设计与制作项目四盒子模型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）事实上所有的网页元素本质上都是以盒子的形式存在的。例如，bodyPh1~h6ulli等元素都是盒子，这些元素都有默认的盒子属性值。（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.块标签块标签在页面中以区域块的形式出现，其特点是每个块标签通常都会占据一整行或多行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块标签有pdivulolli等，其中div标签是典型的块标签。

任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型2.行内标签行内标签也称为内联标签或内嵌标签，其特点是不必在新的一行开始，同时，也不要求其他标签必须在新的一行开始。行内标签一般不可以设置宽度、高度和对齐等属性，常用于控制页面中的特殊文本的样式。

任务1.3〓网页制作工具任务4.2标签的类型与转换4.2.1标签的类型常见的行内标签有strongbemiaspan等，其中span标签是典型的行内标签。2.行内标签

任务1.3〓网页制作工具任务4.2标签的类型与转换4.2