项目4 盒子模型（课件）《网页设计》（劳动保障出版社）

网页设计与制作 项目四 盒子模型 N 1 知识目标 理解盒子模型的概念 掌握盒子模型的相关属性 熟悉标签的类型与转换 ‹#› 网页设计与制作 2 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的实际宽度和高度均是310 px。 ‹#› 网页设计与制作 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定义了第一个块的下外边距为10 px，定义了第二个块的上外边距为30 px，此时两个块之间的垂直间距为30 px，即为margin-bottom和marign-top中的较大者。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务4.2标签的类型与转换 4.2.3块标签间的外边距 当两个相邻的块标签水平排列时，如果左面的标签有右外边距margin-right，右面的标签有左外边距margin-left，则它们之间的水平间距是两者的和。 2. 块标签间的水平外边距 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务4.2标签的类型与转换 4.2.3块标签间的外边距 实例6 块标签间的水平外边距 本例定义了第一个块的右外边距为10 px，定义了第二个块的左外边距为30 px，此时两个块之间的水平间距是40 px，即为marign-right和marign-left的和。 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务4.3综合案例——制作苏轼简介页面 ‹#› 网页设计与制作 任务1.3〓网页制作工具 任务4.3综合案例——制作苏轼简介页面 ‹#› 网页设计与制作 项目小结 本项目主要介绍利用盒子模型制作网页，具体内容如下。 认识盒子模型： 介绍了盒子模型的概念、盒子模型的相关属性和CSS设置背景。 标签的类型与转换： 介绍了元素的类型、元素的转换和块元素间的外边距。 综合案例： 介绍了苏轼简介页面的制作。 通过本项目的学习，掌握盒子模型的概念及使用方法，了解块标签和行标签之间的关系，熟练设置外边距，能够制作苏轼简介页面。 谢谢 $$