基于盒子模型的网页布局方法研究

摘  要：在使用XHTML+CSS技术对网页进行布局时，一般是将页面中的各栏目按DIV盒子分块，每个DIV里面的内容也是由多个盒子模型所组成，盒子模型的使用对网页的布局起着决定性的作用。

关键词：盒子模型；网页布局；CSS

中图分类号：G642           文献标识码：A

1   引言（Introduction）

任何HTML元素在页面上都占据着一定的空间，我们都可以将这些HTML元素看成是盒子模型，所以，在对网页进行布局时，最为重要的就是盒子模型的使用。

2  盒子模型的特征（Characteristics of the box

model）

（1）盒子的基本属性

对于盒子模型而言，基本属性包括：盒子的宽度（width）、高度（height）、边框（border）、内填充（padding）、外边界（margin），如图1所示[1]。

图1 盒子的基本属性

Fig.1 The basic properties of the box

在对网页布局时，盒子的这几个属性就决定了盒子的大小。

（2）盒子模型之间的位置关系

盒子模型之间的关系要么是父子关系（体现在盒子之间是内外包含关系时），要么是兄弟关系（兄弟关系的盒子可以上下排列、左右排列）。

（3）标准流下盒子模型的排列规则

在标准流下，也就是盒子没有使用CSS定位时，所有的盒子模型按两种方式排列，一种是兄弟盒子垂直排列（块元素），一种是兄弟盒子水平排列（行内元素）。

（4）盒子之间的间距

对于水平排列的盒子，它们之间的水平间距=左盒子的右margin+右盒子的左margin，如图2所示。

图2 水平排列的盒子

Fig.2 Horizontal arrangement of the box

对于垂直排列的盒子，它们之间的垂直间距=最大值（上盒子的下margin，下盒子的上margin），如图3所示。

图3 垂直排列的盒子

Fig.3 The vertical alignment of the box

对于父子盒子，它们边框之间的水平间距=父盒子的左padding+子盒子左margin，垂直间距=父盒子的上padding+子盒子上margin，如图4所示。

图4 父子盒子的位置

Fig.4 Father and son of the location of the box

3  运用盒子模型布局网页的技巧（Using the box

model webpage layout skills）

在运用盒子模型布局网页时，通常把网页中的每个元素都可以看成一个盒子，将页面在整体上按<；DIV>；标记进行分块，然后对各个块进行CSS定位。而使用这种技术布局网页时，只要掌握以下几方面的设计技巧，布局中的主要问题都可以解决。

（1）盒子尺寸的计算

盒子整个区域的宽=width+padding（左、右）+margin（左、右）+border（左、右），盒子的区域

高=height+padding（上、下）+margin（上、下）+border（上、下）。所以，在考虑盒子的尺寸时，千万不要忽略它的padding、margin、border值，如图5所示[2]。

但是有一种情况是特例，当盒子的padding、margin、border都等于0时，盒子整个区域的宽=width，盒子的区域

高=height。

图5 盒子尺寸的计算

Fig.5 The box dimension calculation

（2）父子盒子之间位置关系的调整

如果我们在布局时，盒子之间的关系是父子包含关系，它们之间位置关系的调整可以通过以下两种方法实现：

a.设置父盒子的padding值

当我们把子盒子看成是父盒子的内容是，可以通过设置父盒子的paddin-left或padding-top调整它们之间的位置关系，如图6所示[3]。

图6 父子盒子位置的调整（方法1）

Fig.6 Father and son box position adjustment（method 1）

b.设置子盒子的margin值

如果将父子盒子当作是两个独立的盒子，又可以通过设置子盒子的margin-top或margin-left值改变它们之间的位置。但值得注意的是，在IE8下，如果子盒子是父盒子的第一项内容，则子盒子的margin-top值会转移到父盒子上，如图7所示[1]。

图7 父子盒子位置的调整（方法2）

Fig.7 Father and son box position adjustment（method 2）

运用以上两种方法时，在IE6下还有一个BUG：当同时设置了父盒子的paddin-top和子盒子的margin-left后，子盒子的左边界将不起作用。

（3）行内元素的属性限制

对于行内容元素页言，有一些属性设置是无效的。

a.行内元素的width属性：对行内元素设置width值是无效的，因为行内元素的width是由它的内容多少所决定的。endprint

b.行内元素的height值：对行内元素设置height值也是无效的，因为行内元素的height是由它包含的内容高度所决定的。

c.行内元素的padding值和margin值：行内元素设置padding和margin时，只中左、右有效，上、下设置无效。

d.行内元素无法设置背景。

说明：以上行内元素属性设置中width、height、padding、margin的设置限制不包含特殊的行内元素IMG。当然，行内元素与可以通过display属性的设置实现与块元素的相互转换。

4  运用盒子模型布局网页的流程（Using the box

model webpage process layout）

无论是何种布局结构的网页，其基本设计流程是一样的，一般按以下步骤进行：

（1）确定页面的布局结构并画出结构草图。

在画结构草图时，除了必要的栏目版块以外，还必须给整个页面添加一个盒子（通常命名为box），用于对页面的整体效果进行控制。

（2）通过HTML搭建页面的结构。

（3）设置初始化样式。

a.清除所有元素默认的padding、margin、border值，避免默认值对设计结果产生影响。

b.设置整个页面的居中。

①设置盒子的宽度（最外层的包含整个页面内容的盒子）。

②设置盒子的左右margin值都为auto。

③如果要兼容IE6及以下版本的浏览器，则要将body的对齐方式设置为center，页面盒子的对齐方式设置为left。

（4）按照我们写汉字的习惯逐步完成每个版块的设置。

a.内外包含关系的父子盒子，从外到内。

b.上下结构的版块，先设置上版块，再设计下版块。

c.水平排列的版块，按从左到右的顺序进行。

（5）先完成每个独立版块的设计，再调整不同版块之间的位置关系。

5   结论（Conclusion）

运用盒子模型布局网页，必须完全了解盒子模型的基本特性及盒子尺寸的计算方法，熟悉盒子之间位置的控制技巧，再按照规范的设计流程实施操作，这样，不管是结构简单还是结构复杂的页面，我们设计起来都会毫不费力。

参考文献（References）

[1] Jeff Croft，李方进.CSS实战精粹[M].北京：电子工业出版社，

2007.

[2] 温谦.CSS彻底研究[M].北京：人民邮电出版社，2008.

[3] 张晓晨.DIV+CSS网页布局商业案例精粹[M].北京：电子工业

出版社，2007.

作者简介：

孙小英（1973-），女，硕士，副教授.研究领域：计算机网络.endprint

b.行内元素的height值：对行内元素设置height值也是无效的，因为行内元素的height是由它包含的内容高度所决定的。

c.行内元素的padding值和margin值：行内元素设置padding和margin时，只中左、右有效，上、下设置无效。

d.行内元素无法设置背景。

说明：以上行内元素属性设置中width、height、padding、margin的设置限制不包含特殊的行内元素IMG。当然，行内元素与可以通过display属性的设置实现与块元素的相互转换。

4  运用盒子模型布局网页的流程（Using the box

model webpage process layout）

无论是何种布局结构的网页，其基本设计流程是一样的，一般按以下步骤进行：

（1）确定页面的布局结构并画出结构草图。

在画结构草图时，除了必要的栏目版块以外，还必须给整个页面添加一个盒子（通常命名为box），用于对页面的整体效果进行控制。

（2）通过HTML搭建页面的结构。

（3）设置初始化样式。

a.清除所有元素默认的padding、margin、border值，避免默认值对设计结果产生影响。

b.设置整个页面的居中。

①设置盒子的宽度（最外层的包含整个页面内容的盒子）。

②设置盒子的左右margin值都为auto。

③如果要兼容IE6及以下版本的浏览器，则要将body的对齐方式设置为center，页面盒子的对齐方式设置为left。

（4）按照我们写汉字的习惯逐步完成每个版块的设置。

a.内外包含关系的父子盒子，从外到内。

b.上下结构的版块，先设置上版块，再设计下版块。

c.水平排列的版块，按从左到右的顺序进行。

（5）先完成每个独立版块的设计，再调整不同版块之间的位置关系。

5   结论（Conclusion）

运用盒子模型布局网页，必须完全了解盒子模型的基本特性及盒子尺寸的计算方法，熟悉盒子之间位置的控制技巧，再按照规范的设计流程实施操作，这样，不管是结构简单还是结构复杂的页面，我们设计起来都会毫不费力。

参考文献（References）

[1] Jeff Croft，李方进.CSS实战精粹[M].北京：电子工业出版社，

2007.

[2] 温谦.CSS彻底研究[M].北京：人民邮电出版社，2008.

[3] 张晓晨.DIV+CSS网页布局商业案例精粹[M].北京：电子工业

出版社，2007.

作者简介：

孙小英（1973-），女，硕士，副教授.研究领域：计算机网络.endprint

b.行内元素的height值：对行内元素设置height值也是无效的，因为行内元素的height是由它包含的内容高度所决定的。

c.行内元素的padding值和margin值：行内元素设置padding和margin时，只中左、右有效，上、下设置无效。

d.行内元素无法设置背景。

说明：以上行内元素属性设置中width、height、padding、margin的设置限制不包含特殊的行内元素IMG。当然，行内元素与可以通过display属性的设置实现与块元素的相互转换。

4  运用盒子模型布局网页的流程（Using the box

model webpage process layout）

无论是何种布局结构的网页，其基本设计流程是一样的，一般按以下步骤进行：

（1）确定页面的布局结构并画出结构草图。

在画结构草图时，除了必要的栏目版块以外，还必须给整个页面添加一个盒子（通常命名为box），用于对页面的整体效果进行控制。

（2）通过HTML搭建页面的结构。

（3）设置初始化样式。

a.清除所有元素默认的padding、margin、border值，避免默认值对设计结果产生影响。

b.设置整个页面的居中。

①设置盒子的宽度（最外层的包含整个页面内容的盒子）。

②设置盒子的左右margin值都为auto。

③如果要兼容IE6及以下版本的浏览器，则要将body的对齐方式设置为center，页面盒子的对齐方式设置为left。

（4）按照我们写汉字的习惯逐步完成每个版块的设置。

a.内外包含关系的父子盒子，从外到内。

b.上下结构的版块，先设置上版块，再设计下版块。

c.水平排列的版块，按从左到右的顺序进行。

（5）先完成每个独立版块的设计，再调整不同版块之间的位置关系。

5   结论（Conclusion）

运用盒子模型布局网页，必须完全了解盒子模型的基本特性及盒子尺寸的计算方法，熟悉盒子之间位置的控制技巧，再按照规范的设计流程实施操作，这样，不管是结构简单还是结构复杂的页面，我们设计起来都会毫不费力。

参考文献（References）

[1] Jeff Croft，李方进.CSS实战精粹[M].北京：电子工业出版社，

2007.

[2] 温谦.CSS彻底研究[M].北京：人民邮电出版社，2008.

[3] 张晓晨.DIV+CSS网页布局商业案例精粹[M].北京：电子工业

出版社，2007.

作者简介：

孙小英（1973-），女，硕士，副教授.研究领域：计算机网络.endprint