盒模型的概念
盒模型中的补白、边框和边界
盒模型的嵌套问题
负边界的使用
固定大小的问题
各种自适应的实现方法
CSS 容器属性
第
章
CSS 容器属性，是使用 CSS 布局页面时最重要的属性，页面中各个内容的精确定位，
以及各种常用的页面效果，都要依赖 CSS 容器属性来实现。本章的主要内容包括 CSS
容器属性的取值和应用、嵌套元素之间的距离、使用负边界的效果、自适应高度和宽度
的问题。同时通过实例，详细讲解了各种容器属性的实际应用。
通过本章的学习，读者需要重点掌握盒模型的相关属性及其应用、嵌套元素距离的
计算、自适应高度和宽度的知识。
CSS 标准网页布局开发指南
·112·
6.1 什么是盒模型
在 CSS 中，所有的文档元素（包括块元素和内联元素）都会生成一个矩形框。这个矩形框由以下
几个部分组成：边界、边框、补白、宽度和高度。其具体组成如图 6-1 所示。
图 6-1 盒模型示意图
从图 6-1 可以看出，前面章节使用的宽度和高度不过是整个盒模型的一个部分。接下来，看一下
盒模型与前面所学到的元素属性之间的关系。
6.1.1 内容与盒模型
内容只能出现在盒模型中标有高度和宽度的部分。也就是说，除高度和宽度所包含的区域以外，
盒模型其他部分是没有内容的空白区域。
当内容部分大于定义的容器空间时，内容的显示顺序是从左向右显示。当内容超出定义的容器宽
度时，自动换行显示。当内容的高度超出容器的高度时，不同的浏览器有不同的解释。下面看一个实
例，其代码如下：
.content{
width:200px;
height:100px;
background:#cccccc;}
<div class="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;}
CSS 标准网页布局开发指南
·114·
<div class="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;}
<div class="content">一个使用 padding 的示例</div>
<div class="line"></div>
<div class="content2">不使用 padding 的示例</div>
说明：样式中，用 line 元素分隔 content1 和 content2。line 元素中，定义的属性为高度 20 像素，宽度
100 像素。
其效果如图 6-5 所示。
图 6-5 使用 padding 属性和没有使用 padding 属性的对照
从图 6-5 可以看出，定义了 padding 属性后，元素实际占有的高和宽都增加了 40 个像素。但是很
多的时候，页面的显示效果如图 6-4 所示，并不能显示出补白区域。所以在应用 padding 属性时，要特
第 6 章 CSS容器属性
·115·
别注意元素的占有空间。
6.2.2 百分比值的使用
在使用百分比值时，要注意的一点就是，这个值不是用元素自身的宽度值来计算的，而是用包含
元素的父元素的宽度来计算的。下面是使用百分比值的示例，其代码如下：
.content{
width:700px}
.content2{
width:350px;}
p{
padding:10%; /*注意百分比值的含义*/
width:150px;
background:#cccccc;}
.line{
height:20px;}
<div class="content"><p>这是一个使用百分比值的示例，请注意看不同的宽度的父元素对其中的包含元素的影响，
这将有助于更好的使用百分比值。</p></div>
<div class="line"></div>
<div class="content2"><p>这是一个使用百分比值的示例，请注意看不同的宽度的父元素对其中的包含元素的
影响，这将有助于更好的使用百分比值。</p></div>
说明：代码中定义了 p 元素的宽度为 150 个像素，padding 属性的值为 10%。
其显示效果如图 6-6 所示。
图 6-6 padding 中使用百分比值
从图 6-6 中可以看到，padding 属性的最终取值并不是 p 元素自身宽度的 10%，而是其父元素宽度
