当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页布局的核心内容:CSS盒模型

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

No. « 78 79 80 81 »

技术文章搜索

关键字

CSS样式表 中的 CSS网页布局的核心内容:CSS盒模型

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-09   浏览: 139 ::
收藏到网摘: n/a

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">

      <p>a盒子</p>

   </p>

   <p id="b">

      <p>b盒子</p>

   </p>

   <p id="c">

      <p>c盒子</p>

   </p>

   <p id="d">

      <p>d盒子</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。