基于“DIV+CSS”盒子模型的网页布局初探

摘 要：为了满足新时代人们对信息获取和对外展示的需求，网页设计越来越受人关注。从表格布局到框架设计，再到如今流行的“DIV+CSS”盒子模型设计，网页设计技术的发展日新月异。本文以一个简单的实例，探究“DIV+CSS”网页布局方式的技术特点和优势，以期为广大网页设计技术爱好者和从业人员提供参考。

关键词：网页设计；DIV+CSS；盒子模型实例

中图分类号：TP393.092 文献标识码：A 文章编号：2096-4706（2019）03-0088-03

Preliminary Study on Web Page Layout Based on “DIV+CSS” Box Model

ZHONG Jincheng

（Maoming Transport Senior Technical School，Maoming 525000，China）

Abstract：In order to meet people’s demand for information acquisition and external display in the new era，web design has attracted more and more attention. From table layout to frame design to the popular “DIV + CSS” box model design nowadays，the development of web page design technology is changing with each passing day. With a simple example，this paper explores the technical characteristics and advantages of “DIV + CSS” web page layout，in order to provide reference for the vast number of web page design technology enthusiasts and practitioners.

Keywords：web design；DIV+CSS；box model instance

0 引 言

信息时代，互联网作为信息传播的重要载体，凭借快速、高效、便捷、成本低廉等特点，对人们的生活产生了重要的影响，已成为人们生活中不可或缺的一部分。网页成为人们获取信息、查找资源、发布消息的重要工具。现代社会，无论是个人、团体、政府机构、企业单位，都可以利用自己的主页进行对外沟通、交流。越来越多的人，甚至是非计算机相关专业或者没有接受高等教育的人，也在努力掌握网页设计技能。本文正是基于这种背景，对网页设计方法展开探索，结合网页设计新模式和方式寻求一种易于人们接受、学习的网页设计方法。

1 相关技术简析

1.1 HTML与CSS的分工

超文本标记语言（Hyper Text Mark-up Language，简写HTML）是网页设计使用的标准语言，其可以把文本、图片、多媒体等内容通过客户端浏览器呈现出来。一个好的网页不是对内容的无序堆砌，而是对内容的有序呈现，从而使用户拥有良好体验。在实际应用中，将HTML与CSS相结合可以实现此目标。HTML标签负责呈现内容，CSS作为层叠样式表（Cascading Style Sheets），负责格式化、标准化HTML呈现的内容以及维护样式的统一性，使其更加清晰、美觀。例如，若把一段文字或者一张图片呈现在网页上，则需要用到HTML中相应的标签（文本的标签为“

”，图片的标签为“”），那么，我需要设置文本的相关格式，比如字体、字号或者颜色等，或者给图片加一个边框、设置大小等，又或者给网页中所有的文本和图片设置统一格式，那么则会用到CSS。这就是HTML和CSS的根本区别。

1.2 盒子模型（Box Model）

在设计网页之前，我们先要对该页面进行内容空间分配，即页面的布局。页面布局比较常用的方式有三种：一是传统的表格布局（Table Layout），二是具有特殊用途的框架布局（Frame Layout），三是现在最流行的盒子模型布局，这种布局在网页设计中应用最为广泛。

为什么称之为“盒子模型”？在网页设计中，每一个块级元素基本都有内容（content）、边框（border）、内边距（padding）和外边距（margin）等属性，这些属性可以用日常生活中的常见物体——盒子作比喻来理解，所以叫它盒子模型。理解盒子模型网页设计常用的思维模型，对于开发拓展性强、可维护性高的页面相当重要，同时其也是网页前端布局开发的基础。以元素的边框（border）为界定，边框自身有一定的宽度（例如设置边框宽度为2px）；边框以外为外边距（margin），即元素与元素之间的距离；边框与元素内容（content）之间的距离成为内边距（padding）。每个属性都可分为上（top）、右（right）、下（bottom）、左（left），以方便在实际操作中设置。

1.3 CSS的使用方式

CSS作为一种辅助HTML样式的格式化语言，与HTML的使用需要遵循一定的规则，当然也可以灵活运用。在HTML中使用CSS的方法有三种，分别是行内样式、内嵌样式和外部样式。这三种不同的方法有不一样的表达方式和写法，也可以对代码产生一些影响。

（1）行内样式。行内样式主要写法是把CSS代码直接内嵌到HTML的具体元素中，该写法的优点是可以一步到位，清晰地呈现设置的目标元素；缺点则是会使得代码显得杂乱无章，可读性下降，因此不推荐使用该写法。“style”的CSS行内样式代码写法如下：

（2）内嵌样式。内嵌样式的写法依然把是HTML代码和CSS代码放在同一个文件中，与行内样式不同，内嵌样式写法不把CSS代码直接写在HTML元素中，而是统一把CSS代码写在一个“”元素中，然后把整个“style”代码放在中，该写法可以实现HTML和CSS代码的分离，可读性提高，但该CSS代码只能为它所在文件所用，其他HTML文件不能引用。

（3）外部样式。外部样式实现了HTML文件和CSS文件的分离，它把CSS代码独立成一个“*.css”，既提高了可读性，又能实现CSS文件的重用性，能同时被多个HTML文件加载使用。

2 “DIV+CSS”盒子模型网页布局的优势

2.1 高度的可维护性

可维护性是衡量一个网站好与坏的标准之一。高度的可维护性需要代码具有高度可读性，且代码结构清晰、合理，当页面出现问题（例如浏览器兼容出错、页面校对出现偏差等）时，可以快速地检索代码，分析其原因，找出症结，使得修改代码更加容易。

2.2 较好的可扩展性

页面的可扩展性表现在两个方面：一是模块的可扩展性，即可快速、方便地增、减页面模块或者变动模块位置，保持页面结构的灵活性；二是页面内容的可扩展性，对页面内容进行调整也相当方便、快捷。

2.3 灵活的可定制性

商业网站对是否可定制有着极高的要求，其需要面对喜好不同、审美不同，甚至语言不同的客户，且需要给客户一定的选择空间，由客户决定网站的样式、颜色、语言等。基于“DIV+CSS”盒子模型建造的网站可以在一定程度上满足以上要求，结合JavaScript，并在网页上进行相应的设置，就可以达到此效果。

3 “DIV+CSS”盒子模型页面布局过程

3.1 盒子式页面布局设计简图

盒子式页面布局设计相当于建立一个完整的页面分模块，并为每一个模块分配特定的内容。在页面设计开始阶段，我们可以根据内容的重要程度、内容的量度、内容的性质等因素设计页面布局及尺寸，即为页面内容确定一个大体的位置。

页面的初始设计图可以灵活变动，无论是尺寸还是位置皆可视情况而定，内容部分可根据实际情况增添模块，在代码上可以简单地用一组DIV块来实现，可操作性高。代码如下：

添加模块前代码：

<！--con_left模块内容-->

添加模块后代码：

<！--con_left模块内容-->

<！--con_right模塊内容-->

根据代码所示，在container模块中原本只有con_left模块，如果需要添加另外一个模块，则可以利用DIV标签轻松添加一个con_right模块。

3.2 实现盒子式“占位图”

在盒子式网页设计实现的过程中，我们可以采取“先占位后定位”的原则，即可以根据盒子式页面设计简图，用不同颜色的版块为各模块占位，使用代码实现由简图到“占位图”。在本例中，我们设计了一个“占位图”，红色表示页面头部，黄色表示页面底部，页面主题内容分为两大部分，分别用蓝色和绿色占位，效果如图1所示。

在代码编写方面，HTML关键代码如下，其中header模块为页面头部部分，main模块为主体内容部分（内分为main_left模块和main_right模块），footer模块为页面底部部分，另外，nav部分为各模块之间的间隙而设。

HTML代码中只是利用DIV元素创建了一个空白的框架，在没有添加任何样式的设置之前，你会发现什么都看不见，为了完成如图1所示的“占位图”，需要在HTML代码中加入相应的CSS样式设置，CSS代码也相对应地对HTML代码中相应模块进行样式设置。

3.3 以“占位图”为基础填充内容

“占位图”的页面布局方法能起到为内容“占位”，确定内容模块区域的作用。这种做法具有诸多优势，一是逻辑上非常清晰，一目了然；二是代码的运用相对简单，是网页设计中页面布局的经典做法；三是设计模板化，扩展性强，可重复使用，可以提高网页开发的效率，对于网页设计初学者来说尤其受用。在此“占位图”的基础上，我们把内容添加在合适的位置，并对其进行调整使其美化，一个网页设计即完成。

4 结 论

将HTML标签和CSS样式结合，是网页设计的基础，如本文中所述实例所示，通过使用HTML设定内容，用DIV标签限定内容的区域（即建立一个“块”），用CSS中的颜色、大小标识“块”，建立一个以颜色为标识的“占位图”，再在每一“块”中填入相应内容，就是简单网页设计的整个流程。“DIV+CSS”盒子模型网页布局方法，相对来讲逻辑更清晰，入门门槛更低，对初学者来说相当受用。而要建造一个好看而又受欢迎的网页，涉及到的因素会很多，例如内容要具有有足够的吸引力、网页特效够丰富等，这就对网页设计者提出了更高的技术要求。

参考文献：

[1] [美]迈耶著.CSS权威指南（第3版） [M].尹志忠，侯妍，译.北京：中国电力出版社，2010.

[2] 喻浩.CSS+DIV网页样式与布局从入门到精通 [M].北京：清华大学出版社，2013.

作者简介：钟金成（1990.05-），男，汉族，广东高州人，计算机教师，初级职称，本科，研究方向：计算机程序设计、网站开发。