| 标题 | 基于盒子模型的网页布局方法研究 |
| 范文 | 摘? 要：在使用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是由它的内容多少所决定的。 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-），女，硕士，副教授.研究领域：计算机网络. 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-），女，硕士，副教授.研究领域：计算机网络. 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-），女，硕士，副教授.研究领域：计算机网络. |
| 随便看 |
|
科学优质学术资源、百科知识分享平台，免费提供知识科普、生活经验分享、中外学术论文、各类范文、学术文献、教学资料、学术期刊、会议、报纸、杂志、工具书等各类资源检索、在线阅读和软件app下载服务。