[摘 要]本文通过对比传统表格布局网页和DIV+CSS布局网頁的两种方法，分析了两者的优缺点，同时详细介绍了四种CSS样式表，并总结了在使用DIV+CSS布局网页中使用到的一些常用技巧和注意事项。
　　[关键字]网页布局 DIV+CSS 选择器 属性 样式表
　　中图分类号：G622.4 文献标识码：A 文章编号：1009-914X（2018）46-0357-01
　　1 前言
　　纵观过去十年，网页主要由页眉、页脚、边栏和正文组成。这种传统风格的网页符合中国人的审美标准和阅读习惯，一直沿用至今。然而随着社会文化多元化发展，网页的排版布局也在千变万化，没有一个固定的模式。面对越来越复杂的网页排版，对于网页布局技术也提出了更高的要求。
　　2 TABLE和DIV+CSS布局技术
　　传统的网页结构简单，内容相对较少，通常使用TABLE布局定位，这也是网页初学者惯用的网页布局技术。使用TABLE布局网页具有搭建速度快、容易控制的特点。而且可以控制不同对象，不用担心各个版块之间相互影响的问题。TABLE布局网页这种技术目前依然没有被淘汰，例如在办公自动化杂志的网页制作中，我们都还能看到它的身影。但是如果在网页中使用过多的表格，网页的加载速度就会大打折扣，这和如今的快节奏生活格格不入，甚至没有人有足够耐心等待20秒浏览一个网页，人们对于网页的加载速度提出了更加苛刻的要求。同时我们又发现，如果对网页重新进行修改和扩展时，TABLE也不是一个好的选择。DIV+CSS的布局方式符合W3C标准，代码结构清晰明了，内容和表现分离，带来足够好的可维护性，布局精准，网站版面布局修改简单，最重要的是加快了页面的加载速度，同时节约站点所占的空间和站点的流量，用只包含结构化内容的HTML代替嵌套的标签，提高搜索引擎对网页的搜索效率。[1]
　　使用DIV+CSS布局网页是将内容与表现相分离，内容部分指的是在网页中看到的文字、图片、媒体等对象，表现就是上述对象所呈现出来的效果。其实就是用DIV的盒子模型把网页的各部分进行分割，划分成不同的区块，然后利用CSS样式来精准定义这个盒子模型的位置、大小等属性，最后把网页上的对象加入到一个个的盒子中，形成一个完整的网页。
　　3 CSS样式分类
　　CSS样式分为四种：行内样式、内部样式、外部样式和导入样式。[2]
　　（1）行内样式-就是直接在html标签内写样式代码。例如：
　　

一级标题

　　行内样式只对它所写入的标签起作用。
　　（2）内部样式-写在标签中的内，例如：
　　
　　内部样式对它所在的当前网页有效，对网站中的其它网页不起作用。
　　（3）外部样式-是把样式代码专门写在一个扩展名为.css的文件中，代码书写格式和内部样式书写格式一样，在网页源码中用link方式连接。例如：
　　在style1.css样式表文件中写入H1{color：blue；font-size：30px；text-align：center；}
　　在index.html文件的中写入
　　用外部样式表的好处在于，把样式代码写在一个css文件中，网站中的哪个网页需要引用该样式表，就在网页中用Link调用即可，这样就做到了代码复用，避免重复书写相同代码。
　　（4）导入样式-是用@import url连接外部样式表文件，它一般写在另一个样式表文件内部。例如：@import url（“style1.css”）；
　　用导入样式表同样能使代码复用，提高工作效率。
　　4 DIV+CSS使用技巧和注意事项
　　（1）文字水平居中和垂直居中对齐
　　使用text-align属性，将值设置为center，可以将文字相对于它所在的div水平居中对其；使用height属性设置div高度，在使用line-height属性将行高设置成相同高度，即可将div中的文字垂直方向居中显示。[3]代码如下：
　　（3）关于容器的高度问题
　　如果是在容器中动态地添加内容，最好不要定义高度，随着内容的增加，容器垂直方向上可以自动加高；如果容器中内容的高度是固定的，那么容器的高度最好也事先定义好，其中的内容高度不要超出容器。
　　综上所述，盒子模型是CSS控制网页布局的核心内容，只有深入理解了内容、边框、填充、间距、浮动等属性的含义，并能够灵活地运用它们，继而在实际工作中多加练习，不断总结经验，才能不断提高网页制作的水平。
　　参考文献：
　　[1]汤文飞 Dreamweaver CS4网站设计实例教程 机械工业出版社 2010
　　[2]丁海燕 网页设计布局方法的探讨 云南大学学报（自然科学版）2013
　　[3]温谦 CSS设计彻底研究 人民邮电出版社 2009