第13章 控制元素的显示效果.pptVIP

13.5.5 统一定义边框颜色 同统一定义边框样式类似，统一定义边框颜色也是需要在颜色一致的情况下才能进行，其属性为border-color，其相关属性如表13-22所示。 统一定义边框颜色属性 border-color 相关属性值 RGB颜色分量、十六进制颜色值，颜色英文关键词 13.5.6 统一定义边框宽度 同统一定义边框样式类似，统一定义边框宽度也是需要在宽度一致的情况下才能进行，其属性为border-width，其相关属性如表13-23所示。 统一定义边框宽度属性 border-width 相关属性值 auto、数值，百分比，属性值，继承值 13.5.7 单侧边框综合的综合设置 单侧边框样式属性包括：border-top、border-right、border-bottom、border-left，它们分别从顶部、右侧、底部、左侧来定义边框的属性。例如，边框项部综合属性border-top用来定义元素上侧边框的边框颜色、边框宽度、边框样式等属性。单侧边框综合设置的相关属性如表13-24所示。 单侧边框综合设置 border-top，border-right，border-bottom，border-left 相关属性值 宽度，样式，颜色 13.5.8 边框综合效果 在前面介绍了关于边框的单独定义，现在来介绍边框的统一定义效果。和边框统一样式、颜色、宽度一致，可以通过边框综合属性border来定义元素边框的所有属性，其相关属性如表13-25所示。 边框综合效果设置 border（top，right，bottom，left） 相关属性值 宽度，样式，颜色 13.6 元素的边界 边界属性是拉开元素之间距离的属性，通过边界属性使得元素之间有一定的距离，从而将元素更有效地区分开。根据13.5节的举例，如果将元素比作博物馆的一幅幅画，那么边界就相当于画与画之间的间隔。CSS边界属性是处于盒模型最外侧的部分，在边界区域中将显示父元素的背景。边界属性包括margin-top属性、margin-right属性、margin-bottom属性、margin-left属性等。 13.6.1 定义单侧边界的效果 有时候只需要用到元素的一侧边界，于是就引入了元素的单侧边界属性。通过单侧边界可以有区分地定义某一侧边界的大小，以做出符合自己特色的页面。 13.6.2 定义边界综合效果 如果在实际应用中对边框的四个边界都要进行控制的话，那么使用单侧边界属性将加大代码的使用量，所以这里引入边界综合属性的概念。通过边界的综合属性，可以仅通过一行代码就定义出四个边界的属性。 13.6.3 边界与背景的关系 上面的章节分析了边界的各种属性，那么边界和背景的关系是怎样的呢？ 【实例13-29】关于边界和背景关系的实例。为了便于说明，定义一个和【实例13-22】一样的基础页面，并在这个页面上修改，来演示其显示效果。为了节省篇幅，这里不再写页面代码，读者可以翻阅13.4.6节的页面内容。 1-* 第13章 控制元素的显示效果 本章将介绍关于CSS对页面元素的应用。首先介绍关于元素盒子模型的概念；然后通过实例，详细讲解各种容器属性的实际应用。 13.1 盒模型的概念 一个网页是被分解成若干区块来控制页面框架的，当然这些区块都是为了放置网页不同元素服务的。基于DIV+CSS技术的“盒子模型”代替了传统的table表格嵌套。可以把“盒子模型（Box Model）”看成是网页的一个区块，也可以把它看成是大区块中的一个“区块元素”。 13.1.1 块元素和内联元素 块元素和内联元素是两个重要的概念（因为有些CSS属性只适用于块元素，有些适用于内联元素）。了解什么是块元素和内联元素，并了解其特性将有助于更好地使用CSS属性。 1．块元素 2．内联元素 13.1.2 元素宽度的计算 通过上面的学习我们了解了块元素和内联元素以及关于盒子模型的定义，下面我们来看对于元素宽度的计算。 13.2 元素内容的大小 在CSS中，元素内容的大小包括width属性和height属性。 13.2.1 定义宽度 宽度属性width用来定义元素显示内容部分的宽度，其相关属性如表13-1所示。 宽度属性 width 相关属性值 auto、数值，百分比，继承值 13.2.2 定义高度 定义完宽度，下面我们来介绍关于高度的定义，高度属性heigh是用来定义元素中显示内容部分的高度，其相关属性如表13-2所示。 宽度属性 height 相关属性值 auto，数值，百分比，继承值 13.2.3 内容与宽度、高度属性的关系 在上面的例子中，我们介绍了页面宽度和高度的定义，在这里我们有一个疑问，既然可以定义页面元素的宽度与高度，那么页面元素内容与宽度和高度的关系又是怎样