DIV+CSS网页布局技术中盒子模型的应用研究

2012-09-18刘军华陶永进

湖南邮电职业技术学院学报 2012年4期

刘军华，陶永进

（长沙通信职业技术学院，湖南长沙 410015）

随着网络技术的不断发展与WEB 2.0标准化设计理念的普及，网页的布局方式也由原来的表格方式逐步向更为规范的DIV+CSS布局方式转变，DIV+CSS布局方法弥补了表格布局的不足，实现了表现形式与网页内容的分离，有利于网页后期维护和修改，大大简化了网页代码，减少网络带宽资源浪费，进一步提升了网页的加载时间，增强了用户体验。因此，DIV+CSS已是目前比较流行的一种网页布局方式，它已成为当前一种网页设计标准，国内很多大型门户网站已经纷纷采用该方式进行网页的排版布局。从实际应用情况来看，此方法好于表格布局方法，优势十分明显，已获得业内的广泛认可和应用[1]。

然而，由于不同版本或类型的浏览器对CSS（Cascading Style Sheets，层叠样式表）的支持及解析结果有所不同，加之CSS样式应用存在优先级的关系，要制作出兼容当前所有主流浏览器的网页，相对来说，使用DIV+CSS来对网站设计布局对设计师的要求更高一些，不仅要懂得手写HTML语言和CSS样式，还必须深刻理解并掌握DIV+CSS布局中的网页元素属性的原理与方法。这样，才能在实际应用中更加得心应手，实现各种设计与布局效果。

本文针对DIV+CSS布局技术中一个比较重要的内容——盒子模型展开研究，通过实例深入介绍了CSS盒子模型的结构及在网页制作中的应用。

1 盒子模型概述

1.1 盒子模型的概念

现实世界中，所有能容纳东西的矩形物体包括相框、箱子、门窗、房子等都可以看作盒子，而网页中的盒子泛指网页中的每一个HTML标签，这些HTML标签如同盒子一般容纳网页上的各种文字、段落、图片等内容，与日常生活中的盒子一样具有由内容 (content)、填充 (padding)、边框 (border)和盒子之间的边界 (margin)四个显著特性，所不同的是现实生活中的东西一般不能大于容纳它的盒子，否则东西装不下或者盒子被撑坏。而网页中的盒子具有弹性，里面的内容大过盒子本身时会自动适度变大。

模型是现实生活中某些事物本质特性的一种抽象，所谓CSS盒子模型就是建立在这种特性后所形成的对网页设计定位与布局的一套原则和规范[2]，其模型逻辑结构如图1所示。

图1 盒子模型

1.2 盒子模型的内部结构

从图1盒子模型可以看出，盒子模型一般具有内容、填充、边框、边界这4种特性，或者说一个盒子模型主要由这四个部分组成。其中，内容就是盒子里装的东西；填充就是盒子与内容之间的空隙；边框就是指盒子本身的边线；边界就是盒子与盒子之间的间距。CSS为盒子的四个特性定义了一系列相关属性，并通过对这些属性的设置可以丰富盒子的表现效果。下面将由内到外地对盒子模型的四个组成部分及各自的属性进行深入的介绍。

1.2.1 内容（content）

盒子模型中，content是整个盒子模型的主要部分，用于指出网页中需要输出的内容信息，如文本、图片、动画等信息。其它的如padding、margin、border所做的操作都是对content部分布局所做的修饰。内容区主要有以下三个属性：

width：用于设定内容区的宽度。

height：用于设定内容区的高度。

overflow：当内容信息超过内容区指定的大小范围时，该属性用于对溢出部分的处理方法。该属性有四个可选值，为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以通过拉动滚动条显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

1.2.2 填充（padding）

填充有时也称边距，在盒子模型中，padding用于控制盒子模型中内容与边框之间的距离，padding属性接受长度值或百分比值，不允许使用负值。当设置为百分数时，百分数值是相对其父元素的width计算的，其宽度会随父元素的宽度改变而变化。填充的属性主要包括padding-top、padding-bottom、padding-left、padding-right，分别用于设置内容与上、下、左、右四个方向边框之间的距离。也可以使用padding属性一次性设置。如果提供全部的4个参数值，将按顺时针的次序作用于四边；如果只提供1个参数值，将用于全部的四条边；如果提供2个参数值，第1个用于上下两边，第2个用于左右两边；如果提供3个参数值，第1个用于上边，第2个用于左、右两边，第3个用于下边。

1.2.3 边框（border）

边框是环绕内容区和填充的边线。边框分为上、下、左、右四个方向的边框，每个边框包含边框样式、边框颜色和边框宽度3个属性。四个方向的边框可以分别定义样式，也可以统一定义样式。边框的主要属性介绍如下：

border-style：设置所有边框的样式，也可单独设置某个方向的边框样式，下面的属性类同。如border-top-style。具体的样式有dotted（点线）、dashed（虚线）、solid(实线)等九种边框样式。若没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。

border-width：设置所有边框的宽度，即是边框粗细程度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。

border-color：设置所有边框的颜色，其属性值可以是RGB值，也可以是CSS规定的red、black、green等16个颜色名称。

border：该属性是上述三个属性的简写，用于一次性设置四个方向边框的样式，也可以为某一个方向边框单独设置样式。如：border-top、border-buttom、border-left、border-right。该属性的属性值可以同时设置1个、2个、3个和4个，其值所代表的方向与padding属性类同。

1.2.4 边界 (margin)

边界用来设置盒子之间的距离，让盒子之间保持一定的空隙而不会紧凑地连接在一起。margin属性值可以为负值。边界的主要包括margin-top、margin-bottom、margin-left、margin-right，分别用于设置盒子之间四个方向的距离。也可以使用margin属性一次性设置，属性值可以同时设置1个、2个、3个和4个，其值所代表的方向与padding属性类同。

1.3 盒子模型的类型

网页中的任何一个HTML标签都可以看成是一个盒子，也就是说HTML标签即是盒子，盒子即是HTML标签。设有如下HTML网页源码，如图2（a）所示，经解析后所呈现出的默认排列效果如图2（b）所示。

图2 网页源码及默认排列方式

从图2（b）中可以看出，

标签的排列方式是上下或堆积式排列，标签的排列方式是左右或是单行内排列的。由此分析得出，默认状态下，HTML标签或者说盒子模型呈现两种排列形态，一种是堆积式排列，另一种是单行内排列。

根据HTML标签这一特征，我们将HTML标签分为块标签和行内标签，其中，块标签是指默认排列方式为堆积式的标签，如div、p、li等标签；行内标签是指默认排列方式为单行内排列的标签，如a、img、span等标签。两者除排列方式不同外，还有就是块标签可以通过CSS定义其宽和高，而行内元素的宽和高由其包含的内容决定，直接定义是无效的。当然，这两种类型的标签在显示模式上是可以通过display属性相互转换。

另外，根据浏览器对盒子模型宽度和高度解析结果的不同，还可以将盒子模型分为标准W3C盒子模型和IE盒子模型。为了使制作出来的网页更加符合W3C html的标准，建议在制作网页时，在网页源代码的首行都加上“DOCTYPE”声明语句，即可约束浏览器统一都按照标准W3C盒子模型类型解析。至于不同模式下盒子模型的宽、高度解析具体有什么不同，请参见1.4节盒子模型尺寸计算。

1.4 盒子模型的尺寸计算

从图1盒子模型的组成属性来看，一个盒子模型所占据的空间大小应包括margin、border、padding、content这四个部分的宽高之和。也就是指盒子模型在网页中的实际占据空间的宽度和高度为：

宽度=左边界+左边框+左边距+内容宽度+右边距+右边框+右边界

高度=上边界+上边框+上边距+内容高度+下边距+下边框+下边界

但是，在用CSS定义盒子模型时，所设置的宽度和高度的计算方式有所不同。标准W3C盒子模型中的宽度和高度是指盒子模型中内容区域的宽度和高度，不包括填充、边框和边界值。IE盒子模型中的宽度和高度包含了填充和边框。两种类型盒子模型的宽度和高度范围示意图如图3所示。

图3 (a)标准W3C盒子模型的宽度与高度

图3 (b)IE盒子模型的宽度与高度

假设一个盒子的 margin为 20px，border为1px，padding为10px，content的宽为200px、高为50px。如果用标准W3C盒子模型解释，那么这个盒子需要占据的实际空间位置为：宽20*2+1*2+10*2+200=262px、高 20*2+1*2*10*2+50=112px，盒子的视觉大小为：宽1*2+10*2+200=222px、高1*2+10*2+50=72px；如果用IE盒子模型，那么这个盒子需要占据的实际空间位置为：宽20*2+200=240px、高20*2+50=70px，盒子的视觉大小为：宽200px、高 50px。

默认情况下，每一个HTML标签都有其默认的填充和边界值，为了更精确的控制和表现页面布局，建议在定义CSS样式时，使用*{margin:0;padding:0;}取消所有标签默认的填充和边界值，在需要时再重新设置，这样可以避免出现不可预料的结果[3]。

1.5 盒子模型的浮动与定位

一般状态下，页面中任何一个盒子都有其默认的排列方式，块状元素是自上而下按顺序动态分布，行内元素在每行中是按从左到右的顺序排放。若要让盒子的位置、大小及排列方式按照设计者所期望的意图表现出来，只能通过修改网页结构中元素的先后排列顺序和分布位置来实现。在网页中，可以通过设置盒子的浮动 (float)或定位（position）等属性来达到改变原来排列方式和位置的目的。

1.5.1 浮动 (float)

所谓浮动就是让设置的标签产生浮动效果，脱离原来在页面本应出现的空间位置，不再占用任何正常文档流空间。该属性值有none、left、right三种取值，其中none为默认值,也就是标准流通常的显示状态;left或right,表示当前标签会向其父容器标签的左侧或右侧靠拢。

在网页布局中，浮动元素不但对自身带来影响同时也会影响其后面的其它元素，如果不想受到这种影响则采用clear属性来清除浮动。该属性值有both、left、right、none 四种取值，其中 none 默认值，表示当前元素两边允许有浮动元素；left或right，表示当前元素的左边或右边不允许存在浮动元素；both;表示该元素两边都不允许存浮动元素。我们一般通过语句来清除浮动，以阻止对其后面元素的影响。

1.5.2 定位（position）

position定位与float一样，也是CSS排版中非常重要的概念，position从字面意思上理解就是指定块的位置。position不能单独设置，必须还要配合top、right、bottom和left这4个属性（以下简称TRBL），分别表示的是盒子的各个边界离父元素的距离，或各个边界离原来位置的距离。

position属性有4个参数值，分别为static、fixed、absolute和relative。其中 static为默认值，它表示盒子保持在原本在的位置上，即该值没有任何移动效果；fixed表示固定定位参数值，总是以body元素的左上角为参照物根据TRBL的值产生位移，盒子不会随浏览器的滚动条向上或向下移动，用户体验的感觉就像盒子已经固定在浏览器中；absolute表示绝对定位参数值，以已定位父元素或body元素的左上角为参照物根据TRBL的值产生位移；relative表示相对定位参数值，以元素本身原来位置为参照物根据TRBL的值产生位移。在4个参数值中，被赋予fixed、absolute这2个参数值的盒子会从文档流中脱离，而被赋予relative参数值的盒子仍将继续占用页面空间，周围的文档流不会自动填充盒子位移后留下的空白，因此相对定位对象后原来位置会空一块[4]。