第5章盒子模型《HTML5+CSS3网页设计与制作（第2版）》

学习目标/Target掌握div标签和span标签的用法，能够使用这两个标签搭建页面模块了解盒子模型的相关属性，能够利用这些属性设置盒子模型熟悉元素的类型，能够说明块元素和行内元素的区别和用途了解盒子模型的概念，能够阐述盒子模型的基本结构

学习目标/Target了解块元素垂直外边距的合并规则，能够根据这个规则合理设置页面模块掌握元素类型的转换方法，能够转换不同类型的元素

章节概述/Summary盒子模型是网页布局中非常重要的概念，了解它的规律和特征对准确控制页面元素的布局来说至关重要。本章将深入讲解盒子模型及相关知识，包括盒子模型的属性、元素的类型和转换、块元素垂直外边距的合并规则，为后续学习网页布局打下坚实的基础。

目录/Contents010203认识盒子模型盒子模型的相关属性CSS3新增盒子模型属性04元素的类型和转换

目录/Contents0506块元素垂直外边距的合并阶段案例——制作音乐排行榜

认识盒子模型5.1

5.1认识盒子模型什么是盒子模型？

5.1认识盒子模型盒子模型就是把HTML页面中的元素看作是一个方形的盒子，每个方形的盒子可以由内容、宽度、高度、内边距、边框和外边距组成。

5.1认识盒子模型以手机盒子为例，分析盒子模型的构成内容：手机可以看作盒子模型的内容。宽度和高度：手机盒子的宽度和高度可以看作盒子模型的宽度和高度。内边距：填充泡沫可以看作盒子模型的内边距。外边距：当多个手机盒子并列放在一起时，它们之间的距离可以看作盒子模型的外边距。边框：纸盒的厚度可以看作盒子模型的边框。

5.1认识盒子模型以手机盒子为例，分析盒子模型的构成在盒子模型中，各部分结构的作用描述如下。内容是用户自行定义的。宽度和高度决定了盒子的大小。内边距是出现在内容区域周围的空白区域。外边距是指元素与相邻元素之间的距离。边框显示在内边距和外边距之间，围绕内容区域以线框的形式呈现。

盒子模型的相关属性5.2

5.2盒子模型的相关属性掌握盒子模型的相关属性能够帮助我们灵活地控制页面中的每个盒子。盒子模型的属性基于盒子模型的结构衍生而来，包括边框属性、内边距属性、外边距属性、宽度属性、高度属性以及和盒子模型相关的背景属性。本节将详细讲解盒子模型的相关属性。

5.2.1边框属性边框属性是盒子模型的属性之一，用于为元素设置边框效果。在CSS中，边框属性并不是某个属性，而是包含边框样式属性、边框宽度属性、边框颜色属性、边框综合属性等一系列属性。属性说明属性值border-style边框样式属性none：无边框（默认值）solid：单实线边框dashed：虚线边框dotted：点线边框double：双实线边框border-width边框宽度属性像素值border-color边框颜色属性颜色的英文名称十六进制颜色值RGB颜色值border边框综合属性各边框属性对应的属性值

5.2.1边框属性none：不添加边框样式solid：边框样式为单实线dashed：边框样式为虚线dotted：边框样式为点线double：边框样式为双实线边框样式（border-style）属性值border-top-style:上边框样式;border-right-style:右边框样式;border-bottom-style:下边框样式;border-left-style:左边框样式;如果想要设置某侧边框的样式，可以通过以下属性进行设置。border-style:上边框样式右边框样式下边框样式左边框样式;border-style:上边框样式左右边框样式下边框样式;border-style:上下边框样式左右边框样式;也可以通过为border-style属性综合设置4条边框的样式。

5.2.1边框属性边框宽度（border-width）边框宽度指的是边框的粗细程度。在CSS属性中，border-width属性用于设置边框宽度，其常用属性值是以px为单位的数值。border-top-width:上边框宽度;border-right-width:右边框宽度;border-bottom-width:下边框宽度;border-left-width:左边框宽度;如果想要设置某侧边框的宽度，可使用下列属性：border-width属性遵循值复制原则：1个值：将4条边框的宽度都设置为同一数值。2个值：分别表示上下和左右的边框的宽度。3个值：分别表示上、左右、下边框的宽度。4个值：分别表示上、右、下、左的边框的宽度。

5.2.1边框属性边框颜色（border-color）在CSS属性中，bord