CSS网页布局的核心内容:CSS盒模型

【 tulaoshi.com - Web开发 】

CSS盒模型

本节的内容非常重要，因为盒模型是CSS定位布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用p元素和列表元素，即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作，读者并不理解布局的原理，常常在布局页面的过程中遇到无法理解的问题，需要一步步重复地试错才能完善布局代码的编写。学习本章的盒模型的知识以后，读者将拥有较完善的布局观，基本可做到在代码编写前就胸有成竹。

 11.3.1  什么是CSS盒模型

XHTML中大部分的元素（特别是块状元素）都可以看做一个盒子，而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是流动的，当某个块状元素被CSS设置了浮动属性，这个盒子就会流到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，最需要关注的是盒子尺寸计算、是否流动等要素。

为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和一个盒子非常相似，如图11.18所示。

图11.18  盒模型示意图

大多数XHTML元素的结构都类似于图11.18所示，除了包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。读者在布局网页和定位XHTML元素时要充分地考虑到这些要素，才可以更自如地摆弄这些盒子。

外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（左边外边距）和margin-right（右边外边距）。CSS的边框属性（border）和内边距属性（padding）同样可拆分为4边。在Web标准中，CSS的width属性即为盒子所包含内容的宽度，而整个盒子的实际宽度即为：

盒子宽度=padding-left+border-left+margin-left+width+padding-right+border- right+margin-right

相应地，CSS的height属性即为盒子所包含内容的高度，而整个盒子的实际高度即为：

盒子高度=margin-top+border-top+padding-top+height+padding-bottom+border -bottom+margin-bottom

 11.3.2  外边距的控制

在CSS中，margin属性可以统一设置，也可以上下左右分开设置。在D:web目录下创建网页文件（XHTML1.0），命名为box_margin.htm，编写box_margin.htm文件代码如代码11.17所示。

代码11.17  外边距设置：box_margin.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title外边距设置/title

style type="text/css"

*{margin: 0px;}

#all{width:400px;

     height:300px;

     margin:0px auto;  

     background-color:#ccc;}

#a,#b,#c,#d,#e{width:150px;

               height:50px;

               text-align:center;

               line-height:50px;

               background-color:#fff;}

#a{margin-left:5px;

   margin-bottom:20px;}

#b{margin-left:5px;  

   margin-right:5px;  

   margin-top:6px;

   float:left;}

#c{margin-bottom:5px;}

#e{margin-left:5px;

   margin-top:15px;}

/style

/head

body

p id="all"

   p id="a"a盒子/p

   p id="b"b盒子/p

   p id="c"c盒子/p

   p id="d"d盒子/p

   p id="e"e盒子/p

/p

/body

/html

为了更方便看到p的表现，笔者给外部p设置了浅灰色背景色，并给内部p设置了白色背景色。在浏览器地址栏输入http://localhost/box_margin.htm，浏览效果如图11.19所示。这个示例非常典型，特别是b盒子、c盒子和d盒子之间的关系，笔者作关系图如图11.20所示。

             图11.19  外边距设置                          图11.20  外边距关系图

由于b盒子设置了向左浮动，所以紧随其后的c盒子自然流上来，和b盒子并列同一行，如图11.20所示，b盒子的高度为：

height+margin-top=56（像素）

而c盒子的高度为：

height+margin-bottom=55（像素）

可见，在这一行中c盒子下面留有1像素的空隙，正是d盒子利用这1像素的空间流上来，所以b盒子、c盒子和d盒子存在于同一行。

  说明：读者可以尝试把b盒子的顶部边距设置为5像素，这时b盒子和c盒子高度一致。d盒子无法流上来，d盒子将自动换行，位于b盒子下面。

 11.3.3  边框的样式设置

边框（border）作为盒模型的组成部分之一，其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框（border）属性的值有3种，边框尺寸（像素）、边框类型和边框颜色（十六进制）。在D:web目录下创建网页文件（XHTML1.0），命名为box_border.htm，编写box_border.htm文件代码如代码11.18所示。

代码11.18  边框样式设置：box_border.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title边框样式设置/title

style type="text/css"

* {margin: 0px;}

#all{width:400px;

     height:270px;

     margin:0px auto;  

     background-color:#ccc;}

#a,#b,#c,#d,#e,#f,#g{width:160px;

               height:50px;

               text-align:center;

               line-height:50px;

               background-color:#eee;}

#a{width:380px;

   margin:5px;

   border:1px solid #333;}

#b{border:20px solid #333;

   float:left;}

#c{margin-left:5px;

   border:20px groove #f00;}

#d{margin-left:5px;

   border:2px dashed #000;

   float:left;}

#e{margin-left:5px;

   border:2px dotted #000;

   float:left;}

#f{margin:5px;

   border-left:2px solid #fff;

   border-top:2px solid #fff;

   border-right:2px solid #333;

   border-bottom:2px solid #333;

   float:left;}

#g{margin-top:5px;

   border-top:2px groove #333;}

/style

/head

body

p id="all"

   p id="a"a盒子/p

   p id="b"b盒子（solid类型）/p

   p id="c"c盒子（groove类型）/p

   p id="d"d盒子（dashed类型）/p

   p id="e"e盒子（dotted类型）/p

   p id="f"f盒子/p

   p id="g"g盒子/p

/p

/body

/html

为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色。在浏览器地址栏输入http://localhost/box_border.htm，浏览效果如图11.21所示。

图11.21  边框样式设置

这个例子使XHTML对象看起来更像个盒子了，只是边框只是盒子包装中的一层，最外层的包装是不可见的外边距。边框的宽度计算非常重要，如果读者定位元素要充分考虑边框宽度，如图11.21所示，边框的常用设置方法为：

border:宽度类型 颜色;

这是4条边框统一的设置方法，如果要分开设置4条边框，将border改为border-top（顶部边框）、border-bottom（底部边框）、border-left（左边框）和border-right（右边框）。而修改类型可以修改成不同样子的边框线条，常用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（立体线）、double（双线）、outset（浮雕线）等，读者可以一一尝试。

 11.3.4  内边距的设置

内边距（padding）类似于HTML中表格单元格的填充属性，即盒子边框和内容之间的距离。内边距（padding）和外边距（margin）很相似，都是不可见的盒子组成部分，只不过内边距（padding）和外边距（margin）之间夹着边框。在D:web目录下创建网页文件（XHTML1.0），命名为box_padding.htm，编写box_padding.htm文件代码如代码11.19所示。

代码11.19  内边距的设置：box_padding.htm

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title内边距的设置/title

style type="text/css"

* {margin: 0px;}

#all{width:360px;

     height:300px;

     margin:0px auto;  

     padding:25px;

     background-color:#ccc;}

#a,#b,#c,#d,#e,#f,#g{width:160px;

                 height:50px;

               border:1px solid #000;

               background-color:#eee;}

p{width:80px;

  height:30px;

  padding-top:15px;

  background-color:#cc9;}

#a{padding-left:50px;}

#b{padding-top:50px;}

#c{padding-right:50px;}

#d{padding-bottom:50px;}

/style

/head

body

p id="all"

   p id="a"

      pa盒子/p

   /p

   p id="b"

      pb盒子/p

   /p

   p id="c"

      pc盒子/p

   /p

   p id="d"

      pd盒子/p

   /p

/p

/body

/html

为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色，而p元素设置了#cc9背景色。在浏览器地址栏输入http://localhost/box_padding.htm，浏览效果如图11.22所示。

图11.22  内边距的设置

 11.3.5  盒模型兼容问题

微软的IE 6.0以后的版本在浏览器内嵌了两种表现模式：标准模式和兼容模式。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在兼容模式中，页面将以IE 5.0，甚至IE 4.0的显示页面的方式来表现，使以前的网页也能正常显示。这两种模式最大的问题就是盒模式的兼容问题，但是，IE在兼容模式下运行的盒模式依然在最新版本的IE 7.0保留着，一旦页面使用兼容模式浏览，IE 7.0将变成跟IE 5.0一样不兼容Web标准。

不仅IE浏览器，其他浏览器都有类似的多种解析模式，如Opera浏览器、FireFox浏览器等。使用浏览器不同的模式通过不同的DTD（文档类型声明）来实现，在早期的HTML页面制作中，html声明部分直接使用的：

html/html

这样的页面在浏览器中浏览时会使用兼容模式，如果HTML页面使用以下DTD声明。

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

或：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

html xmlns="http://www.w3.org/1999/xhtml"

前者代表HTML 4.0的严格类型的文档类型声明，后者代表XHTML的文档类型声明，这2种DTD将使浏览器使用标准模式。

  说明：虽然IE 6.0和IE 7.0浏览器对Web标准没有实现完全兼容，但相对于以前的版本，IE标准化程度提高了很多。所以读者制作标准页面，应使用XHTML的DTD。