DIV布局之道一：DIV块的水平并排、垂直并排

DIV布局网页元素的方式主要有三种：平铺（并排）、嵌套、覆盖（遮挡）。本文先讲解平铺（并排）方式。

1、垂直平铺（垂直排列）

请看如下代码

CSS部分：

HTML部分：

我们看到这里有三个DIV块，三个DIV块呈上下并列分布，这种方式就是常见的DIV “ 垂直平铺方式”，也是最为常见的布局网页的方式，预览效果：

http://www.91ctc.com/userfiles/20111213div01.jpg

我们可以看到网页中有三个“方块”呈上下排列。

2、水平平铺（水平排列）：

我们要让上例中的三个DIV块呈水平排列该如何改写代码呢？其实只要我们相应的样式中加一个float:left 即可：

CSS部分：

HTML部分无需任何修改，预览效果：

http://www.91ctc.com/userfiles/20111213div02.jpg

DIV布局之道二：DIV块的嵌套，DIV盒子模型

本文讲解DIV块布局的第二种使用方式：嵌套。“DIV嵌套”在有些文献中也被称为“盒子模型”，说的通俗一点就是嵌套（一个大的DIV块内部又包含一个或多个DIV块）。

请看如下代码：

CSS部分：

HTML部分：

这里就是一个使用DIV嵌套的例子，我们看到外围有一个大的DIV嵌套了三个小DIV，其实现的效果如图所示

http://www.91ctc.com/userfiles/20120107div_01.gif

IE6和IE7效果

http://www.91ctc.com/userfiles/20120107div_02.gif

 IE8和火狐效果

注意，这里的预览效果是在IE6和IE7下显示出来的效果，使用火狐和IE8，页面预览效果会不同，这是因为text-align:center这个属性在IE8和火狐下不能够使得内部的DIV块也居中。我们为了让内部的DIV也居中，可以给内部的DIV块使用margin:0px auto属性，即：

这时候，就实现了浏览器兼容。

DIV层可以实现多重嵌套，其内部可以多级嵌套多个DIV，这与表格嵌套类似，熟练使用DIV的嵌套可以很方便实现表格单元格实现的效果，例如一个三行两列的表格，只需要在一个DIV内部嵌套6个DIV即可，当然复杂的表格结构还是不建议使用DIV布局，因为表格主要用于数据处理，所以在布局网页的时候，要根据实际需要来选择布局方式。

DIV嵌套布局网页时候，尤其要注意DIV的外边距（CSS中称为“边距”）和内边距（CSS中称为“补白”，DW中称为“填充”），如图：

http://www.91ctc.com/userfiles/20120107div_03.gif

这里的阴影部分就是上例中的外边距和内边距的模型图，margin:20px即为外层的DIV边距，padding:10px 20px 10px 20px（上-右-下-左的内边距顺序）即为外层DIV的内边距（补白），DIV边距的设置是个难点，设置不当极易出现网页错位、变形，所以关于边距，从业者一定要时刻注意。

DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

本文讲解DIV布局网页的第三种方式：覆盖。DIV覆盖方式经常应用于网页弹出框的制作，例如在网店系统中，当用户没有登录时，点击购买，系统弹出一个登陆框。

请看代码：

HTML部分：

这里，网页主体信息放在main这个样式所在的DIV块内，我们添加一个蒙版，当弹出一个div时，不允许用户进行其他操作。

CSS部分：

这里的样式用到了CSS滤镜写法，z-index属性用来指定当前DIV所处的高度（即Z轴的值），预览效果图如下：

http://www.91ctc.com/userfiles/20120108div_01.gif

我们可以看到，中间蓝色背景的DIV块是网页中最上面的一个DIV块，覆盖了其他的DIV，当其他DIV块被覆盖后，不允许用户点击被覆盖的内容，实现了约束用户的操作的目的。访客可以自己练习一下这个例子。当我们在中间蓝色背景的DIV中放置登陆框的时候，结合JS的控制，就变成了一个弹出式登陆框了哦。