第16章 CSS控制元素的大小演示文稿.PPTVIP

第16章 CSS控制元素的大小 在网页中，一个元素占有空间的大小，由几个部分构成。其中包括元素的内容、元素的补白、元素的边框、元素的边界等4个部分。在这4个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的元素或区域。4个部分一起构成了CSS中元素的盒模型（关于盒模型的具体内容将在下面的章节中讲解）。 16.1 盒模型的概念 一个块元素可以看成一个盒子形状的模型。这个模型的主体部分是元素的内容部分，用来显示元素中的主要信息，这个部分由width（宽度）属性和height（高度）属性来控制。在内容部分之外是补白部分，由padding（补白）属性控制。在补白部分之外是元素的边框，由border（补白）属性控制。在盒模型的最外面是边界部分，由margin（补白）属性控制。盒模型的具体显示效果，如图17-1所示。 16.1.1 元素宽度的计算 通过上一节对盒模型的学习，可以发现，一个元素所占有的空间，与盒模型中4个部分各自占有空间有关。由于在CSS中，可以分别定义每个方向上的盒模型属性（内容部分除外）。所以整个元素占有空间的宽度，使用下面的公式计算。 左边界+左边框+左补白+宽度+右补白+右边框+右边界 整个元素占有空间的高度，使用下面的公式计算。 上边界+上边框+上补白+高度+下补白+下边框+下边界 16.2 元素内容的大小 元素内容的大小，用来控制元素内容的显示效果。通常使用宽度属性（width）和高度属性（height）来定义。有时候（例如，对元素的适应性有特殊要求的时候）还要使用其他的几个尺寸属性，包括max-width、min-width、max-height、min-height等。下面分别进行讲解。 16.2.1 宽度属性width 宽度属性（width），用来定义元素内容的宽度。在宽度属性中，可以使用三种属性值，分别为auto值、长度值、百分比值，其语法结构如下所示。 16.2.2 高度属性height 高度属性（height），用来定义元素内容的高度。在高度属性中，可以使用三种属性值，分别为auto值、长度值、百分比值，其语法结构如下所示。 16.2.3 内容与宽度、高度属性的关系 内容与宽度、高度属性的关系，和使用的浏览器版本有关。这里以IE6.0中来讲解两者的之间的关系（关于其他浏览器中两者的关系，将在后面的章节中讲解）。 16.3 元素的背景 元素的背景通常用来显示修饰的内容，可以在背景中定义背景颜色，也可以在背景中定义图像内容。在CSS中，背景属性包括：背景颜色属性（background-color）、背景图片属性（background-image）、背景图片重复属性（background-repeat）、背景图片位置属性（background-position）、背景图片滚动属性（background-attachment）、背景综合属性（background）等。下面分别进行讲解。 16.3.1 背景颜色属性background-color 背景颜色属性（background-color），用来定义元素的背景颜色。在背景颜色属性中，可以使用两种属性值，分别为颜色值和颜色名称，其语法结构如下所示。 16.3.2 背景图片属性background-image 背景图片属性（background-image），用来定义元素的背景图片。在背景图片属性中，要使用图片文件所在的ulr作为属性的值，其语法结构如下所示。 16.3.3 背景图片的重复属性background-repeat 背景图片的重复属性（background-repeat），用来定义元素背景图片的重复排列方式。在背景图片的重复属性中，可以使用4个属性值，分别为repeat、no-repeat、repeat-x、repeat-y，其语法结构如下所示。 16.3.4 背景图片位置属性background-position 背景图片位置属性（background-position），用来定义元素背景图片的起始位置。在背景图片的背景图片位置属性中，可以使用两种属性值，一种为长度单位，包括长度值和百分比值。另一种为制定值，包括top、center、bottom、left、center、right等，其语法结构如下所示。 16.3.5 背景图片滚动属性background-attachment 背景图片滚动属性（background-attachment），用来定义元素背景图片，是否随浏览器滚条的拖动而滚动。在背景图片滚动属性中，可以使用两个属性值，分别为scroll、fixed，其语法结构如下所示。 16.3.6 同时使用背景颜色和背景图片属性 当同时使用背景颜色和背景图片属性时，背景图片会覆盖背景颜色。如果在