CSS参考手册 第6章 CSS容器属性.pdf

第章

CSS容器属性

盒模型的概念

盒模型中的补白、边框和边界

盒模型的嵌套问题

负边界的使用

固定大小的问题

各种自适应的实现方法

CSS容器属性，是使用CSS布局页面时最重要的属性，页面中各个内容的精确定位，
以及各种常用的页面效果，都要依赖CSS容器属性来实现。本章的主要内容包括CSS
容器属性的取值和应用、嵌套元素之间的距离、使用负边界的效果、自适应高度和宽度

的问题。同时通过实例，详细讲解了各种容器属性的实际应用。

通过本章的学习，读者需要重点掌握盒模型的相关属性及其应用、嵌套元素距离的
计算、自适应高度和宽度的知识。

·112·CSS标准网页布局开发指南

6.1什么是盒模型

在CSS中，所有的文档元素（包括块元素和内联元素）都会生成一个矩形框。这个矩形框由以下
几个部分组成：边界、边框、补白、宽度和高度。其具体组成如图6-1所示。

图6-1盒模型示意图

从图6-1可以看出，前面章节使用的宽度和高度不过是整个盒模型的一个部分。接下来，看一下
盒模型与前面所学到的元素属性之间的关系。

6.1.1内容与盒模型

内容只能出现在盒模型中标有高度和宽度的部分。也就是说，除高度和宽度所包含的区域以外，
盒模型其他部分是没有内容的空白区域。
当内容部分大于定义的容器空间时，内容的显示顺序是从左向右显示。当内容超出定义的容器宽
度时，自动换行显示。当内容的高度超出容器的高度时，不同的浏览器有不同的解释。下面看一个实
例，其代码如下：

.content{
width:200px;
height:100px;
background:#cccccc;}

<divclass="content">这是一个当内容部分超出容器的示例，请注意看不同的浏览器对此进行的不同解释，这将有
助于更好的使用容器。</div>

该样式在IE中的显示效果如图6-2所示。
其在FIREFOX浏览器中的效果如图6-3所示。

第6章CSS容器属性·113·

图6-2内容大于容器时在IE浏览器中的显示效果图6-3内容大于容器时在FIREFOX浏览器中的显示效果

从图6-2和图6-3可以看到，容器内容和容器之间的关系，在IE浏览器和FIREFOX浏览器中存
在着差异。了解这个差异，将有助于制作兼容IE浏览器和FIREFOX浏览器的页面。
在盒模型中，内容显示在高和宽所包含的区域。在宽、高定义的这个区域以外，将显示元素本身
的背景（或者包含元素的父元素的背景），下面详细讲述相关内容。

6.1.2背景与盒模型

1．元素本身的背景
元素本身的背景，出现在盒模型边框以内的部分，即内容部分和补白区域，都将显示背景（包括
背景颜色和背景图片）。
2．父元素背景
父元素的背景总是处于子元素之后。如果子元素中没有定义背景颜色（也没有定义背景图片），
则子元素内容部分会显示父元素的背景，子元素的边框将遮盖父元素的背景，子元素的边界部分将显
示父元素的背景。

6.2补白属性

补白属性是紧连着宽度和高度的属性，为元素设置了补白属性的同时，也增加了元素所占有的空
间。下面详细讲解补白属性及其应用。

6.2.1补白属性详解

在CSS中，补白属性（即padding属性）是一个不能继承的属性。其具体的语法结构如下：

padding:长度值|百分比值;

一个使用padding元素的示例代码如下：

.content{
width:300px;
height:50px;
padding:20px;}

·114·CSS标准网页布局开发指南

<divclass="content">一个使用padding的示例</div>

说明：该样式为一个宽为300像素、高为50像素的元素，定义了大小为20个像素的补白属性，即在
元素的宽和高以外，将出现20个像素的空白区域。

其应用于网页，效果如图6-4所示。

图6-4使用padding属性的简单示例

从图6-4中并不能看到补白属性所带来的效果。这是因为元素没有定义背景，所以就显示了页面
的背景。为元素定义一个背景颜色，同时用一个没有定义补白属性的元素进行对照。其代码如下：

.content{
width:300px;
height:50px;
padding:20px;
background:#cccccc;}/*定义元素的背景，目的是显示补白属性的效果*/
.content2{/*定义一个大小相同元素作为对照*/
width:300px;
height:50px;
background:#cccccc;}
.line{/*定义空白元素进行分隔*/
height:20px;
width:100px;}

<