浅谈DIV+CSS页面布局在教学中的体会

【摘 要】DIV+CSS成为目前网站的主要布局手段，越来越受重视。这种网页布局和以前教材中表格方式的布局有着很大的区别，它不仅是页面展示核心技术的进步，更对一线教师提出了更高的要求。

【关键词】DIV+CSS 页面布局 盒模型 页面元素

一、引言

简单地讲，DIV+CSS是一种网页全新布局的方法，与传统的用表格方式来定位网页元素不同的是，它把页面的内空和网页的美化分开了，形成了两个方面的分支。在教学中，有一位学生问过我这样一个问题：“老师，每逢遇到重大节日，那些大型网站是如何做到不改变架构的情况下，还能表现出节日渲染的气氛呢？”

二、了解盒子模型

上述问题的答案就是：页面内容与样式分离的技术，大大提高了页面不同风格的应用率。要明白这个理论，首先就要了解DIV+CSS的盒子模型。盒子模型是学习DIV+CSS布局的基础，它非常像我们生活中从网上购物后商家包装物品的盒子。商家在给商品发货时要将纸盒装在包装袋里，这个袋子就是盒子的“边距”，纸箱就是“边框”，那么防止纸箱在运输过程出现碰撞而增加的泡沫垫就可以看成“补白”。简单来说：盒子模型就是加了几层东西的容器，它比我们日常生活单纯的盒子要多出一些内容。例如，p标签是个能盛文字的容器，它的高度就是文字的实际高度，但别忘了文字高度的外表还有三层装饰的东西呢。在实际教学过程中，大部分学生想到的盒子就只是DIV，其实很多元素都可以当作盒子来处理。图1所示为基本教学中常用的盒子模型，页面中的所有元素都遵循该模型的设置方式。

（一）边距

边距是网页元素之间的间隔。CSS的margin属性用于设置边距距离。其通用语法如下：margin：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。

（二）补白

如果你设置了边框颜色，那么文本和边框太靠近就不好看了。CSS的padding属性用于设置补白。其通用语法如下：padding：length。其中，length的值可以用长度单位，也可以用百分比定义，还可以使用关键字auto定义。

（三）边框

边框是页面元素独立体范围的最外圈。边框所包围的是补白+内容，CSS中设置边框的属性有三个，分别是：borde-width：设置边框宽度；borde-color：设置边框颜色；border-style：设置边框样式。

1.border-width属性用于改变边框的宽度，其通用语法如下：Border-width：width。

2.border-color属性用于改变边框的颜色，其通用语法如下：Border-color：color。

3.border-style属性用于改变边框的样式，其通用语法如下：Border-style：style。

三、页面元素的布局

有了上面的学习后，对页面的布局就有了更好的理解。根据多届教学经验，DIV+CSS布局方式是学生反应比较难学的知识点，其内容对初学者而言比较深。根据教学经验，提炼出实质的知识要点：页面元素布局的定位和浮动；块级元素和行内元素的区别与联系。掌握了这些知识点后，就能对DIV+CSS的布局有了个清晰的认识。

（一）块级元素与行内元素

在CSS页面布局中，我们把HTML标签按照一定的特性分成两种。一种是块级元素，这种元素是按照垂直方式来布局的，例如div标签和p标签。另一种是行内元素，按照小平方式布局的，一般是基于语义级的基本元素，只能容纳文本和其他行内元素，例如超链接a和span标签，它们可以通过元素的.display属性相互转换。

（二）CSS布局方式的常规流

CSS+DIV页面布局的学习中有三种常用的模式，分别是常规流、浮动和定位。常规流（normal flow）是网页开发工具默认的方式，块按照从上到下的顺序排版，就像瀑布流下一样。

（三）CSS布局方式的浮动

如果要实现块的水平方向排列，必须使用块的浮动属性，有了它我们就可以随心所欲地排版了。在CSS中，所有元素都可以设置成浮动的方式来展现，它可以使排版更加简单，易于控制。CSS的float属性是设置元素的浮动，它有三个值：left、right和none。Left是左边浮动；right代表右边浮动；none表示没有。

使用浮动定位方式，可以实现到一块到多块的固定宽度。如果需要几个块水平方向排列且居中显示，可以使用志的嵌套形式设计。先用一个块作为容器且居中显示，再将几个块水平排列放置在容器中之中，这样几个块就被绑定并居中显示了。

（四）CSS布局方式：相对定位

最后一种常用的页面布局方式，就是页面的定位。CSS的position属性用于定位，可用position属性来精确定位元素相对其父元素或者其他元素的位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。Static是默认值，表示是静态的不动；relative代表相对定位，其意就是相对他人而言。

（五）CSS布局方式：绝对定位

Position属性中的absolute代表绝对定位，使用绝对定位的子元素时候，其移动是相对父元素来说的，也就是它必须有一个参考对象的问题。注意，它始终要相对父元素来绝对定位的。通常这个最初的包含块是html标签。

四、DIV+CSS页面布局应用举例

以下以一个艺术宣传网页为例来讨论一下DIV+CSS页面布局的架构原理。在设计前，应该遵循简洁明了的要求，页面不应该杂乱无序，布局应该合理，有个性，区块划分要合理，布局可以按照各栏目的内容来进行区块划分。根据站点及栏目的分类，笔者对主页进了如下的布局及有布局时各块的嵌套和命名：

/* 放置整个页面的box 块*/

此处显示网页横幅广告的内容块”