一、学生初学CSS+DIV，在网页中引入盒子模型
为了克服学生对这个知识点的畏难情绪，我是这样处理的。我课前准备一个保温杯的包装盒，这个盒子有外壳，中间有一些用于抗震的泡沫塑料，上课时，我出示了本节课的标题，和教学目标后，向学生展示这个盒子，让学生观察这个盒子由几部分组成，引导学生中间部分是放杯子的地方，可以说是内容区，填充的泡沫塑料是填充区域，盒子的外包装用的纸壳可以说是边框。两个盒子之间的距离是边界。
二、生活中的盒子要和网页中的盒子结合起来
CSS+DIV网页设计中，页面中的所有元素都看成一个个盒子，例如，网页中显示的一幅图片，其背后实际对应着一个盒子模型结构，它包括如下属性：内容大小：内容区域的宽度和高度。填充：是内容与边框的距离，对应包装盒的填充部分。边框：对应包装盒的纸壳，一般具有一定的厚度。边界：位于边框外部，是边框外面周围的间隙。
三、盒子模型和具体的案例相结合
网页中的一幅图片可以看成一个盒子模型，那么使用这个盒子模型处理图片能达到怎样的效果呢？演示主题相册的案例，引导学生观察案例中图片的处理方式，图片外面有1px的边框，图片和边框之间有2px的间隙，图和图之间有10px的间距。引导学生将案例和盒子模型的属性结合起来，案例中的图片就盒子模型中的内容属性，图片和边框之间的间隙就是盒子模型中填充属性，案例中的边框就是盒子模型中的边框属性，案例中的图和图之间的间距就是盒子模型中的边界属性。
四、盒子模型的属性代码给学生详细介绍盒子模型的属性代码
一个盒子模型是由内容、边框(border)、填充(padding)和边界(margin)四个部分组成的。填充、边框和边界都分为“上右下左”4个方向、既可以分别定义，也可以统一定义，如：div{margin-top：1px；margin-right：2px；margin-bottom：3px；margin-left：4px；padding-top：1px；padding-right：2px；padding-bottom：3px；padding-left：4px；border-top：1pxsolid#000；border-right：1pxsolid#000；border-bottom：1pxsolid#000；border-left：1pxsolid#000；}也可以写成：div{margin：1px2px3px4px；按照顺时针方向缩写padding：1px2px3px4px；按照顺时针方向缩写border：1pxsolid#000；}
五、使用盒子模型属性实现具体案例——主题相册
1.所有的内容都在一个大盒子里，这个大盒子可由div实现#content{width：750px；padding：5px；}宽度为750px，填充为5px。
2.主题相册标题部分。用h1实现，h1同样也可以看作是一个盒子，设置h1的CSS属性h1{font-size：20px；color：#c03；font-weight：normal；字体大小为20px，颜色为#c03，粗细为正常。border-bottom：2pxsolid#c03；padding-bottom：4px；}下边框为2px实线，颜色为#c03，下填充为4px。
3.婚纱系部分。婚纱系和写真系、童真系结构相似，可以使用div层，应用类样式来实现。Div层同样可看作是一个盒子，设置类的名称为.theme.theme{width：100%；border-bottom：1pxdashed#e6e6e6；padding-top：5px；padding-bottom：20px；}宽度为100%，和父层content层的宽度一样，下边框为1px虚线，颜色为#e6e6e6，上填充为5px，下填充为20px。
4.婚纱系中的标题部分。用h2实现，h2同样也可以看作是一个盒子，设置h2的CSS属性，h2{font-size：14px；color：#333；padding-left：8px；}字体大小为14px，颜色为#333，左填充为8px。
5.婚纱系中的图片部分。用img实现，img同样也可以看作是一个盒子，设置img的CSS属性，img{border：1pxsolid#ccc；padding：2px；margin：08px；}边框为1px实线，颜色为#ccc，填充为2px，上下边界为0，左右边界为8。
6.写真系部分。复制婚纱系所在层所有内容，更改相应的图片，文字内容即可。通过以上步骤，使用盒子模型完成了一个具体案例。
六、关于盒模型还有以下几点需要注意
1.边框默认的样式可设置为不显示(none)。
2.填充值不可为负。
3.若盒中没有内容，尽管定义了宽度和高度都为100%，实际上也只占据%，因不会被显示，此处在DIV+CSS布局的时候需要特别注意。
4.Body是一个特殊的盒子，它的背景颜色会延伸到边界部分，而其它盒子的背景颜色只会覆盖到内容+填充部分。
作者：任巧枝 单位：太原市第五职业中学
