五、div的分栏布局——单列居中显示
上一节我们也提到了div的左右分栏布局，但没有实现真正意义上的分栏。这一节，我们就来结合css样式实现分栏。
在讲解分栏之前，有必要对单一列的布局做一个了解。
如代码：
看如图效果：
上图中实现的是固定的宽和高，如果想实现自适应宽度，我们可以用百分数来控制。即把其中的width值改为width:N%，这样就会根据浏览器当前宽度自动调整。
设定了div的总宽度，但它会按默认的方式居左显示。那么怎么实现它的固定列宽和自适应列宽都能够居中显示呢？这就用到它的外边距属性：
margin:0px auto;
margin属性表示对象的外边距，分别为：上边距、右边距、下边距、左边距（即按照顺时针顺序）。
当书写一个参数时，表示四个边距均为此参数。
当只书写两个参数时，第一个参数表示：上下边距，第二个参数表示左右边距。
当书写三个参数时，第一个表示上边距，第二个表示左右边距，第三个表示下边距。
margin属性除了支持数值外，还支持auto值，表示让浏览器自动判断边距。
这样margin:0px auto;就表示上下边距均为0px,左右边距根据浏览器自动判断一致，从而实现了居中效果。
试一试在上面代码中加入此句后，为：
程序代码
程序代码
程序代码
在讲解分栏之前，有必要对单一列的布局做一个了解。
如代码：
<html>
<head>
<title></title>
<style type="text/css">
#layout{
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id ="layout">单一列的固定宽度默认居左显示</div>
</body>
</html>
在css中我们分别实现了id为layout的div的背景色，边框的线粗、线样式、线颜色，以及div的宽和高。<head>
<title></title>
<style type="text/css">
#layout{
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id ="layout">单一列的固定宽度默认居左显示</div>
</body>
</html>
看如图效果：
上图中实现的是固定的宽和高，如果想实现自适应宽度，我们可以用百分数来控制。即把其中的width值改为width:N%，这样就会根据浏览器当前宽度自动调整。
设定了div的总宽度，但它会按默认的方式居左显示。那么怎么实现它的固定列宽和自适应列宽都能够居中显示呢？这就用到它的外边距属性：
margin:0px auto;
margin属性表示对象的外边距，分别为：上边距、右边距、下边距、左边距（即按照顺时针顺序）。
当书写一个参数时，表示四个边距均为此参数。
当只书写两个参数时，第一个参数表示：上下边距，第二个参数表示左右边距。
当书写三个参数时，第一个表示上边距，第二个表示左右边距，第三个表示下边距。
margin属性除了支持数值外，还支持auto值，表示让浏览器自动判断边距。
这样margin:0px auto;就表示上下边距均为0px,左右边距根据浏览器自动判断一致，从而实现了居中效果。
试一试在上面代码中加入此句后，为：
<html>
<head>
<title></title>
<style type="text/css">
#layout{
margin:0px auto;
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id ="layout">单一列的固定宽度，让其居中显示</div>
</body>
</html>
<head>
<title></title>
<style type="text/css">
#layout{
margin:0px auto;
background-color:#eeeeee;
border:1px solid #33ccff;
width:240px;
height:150px;
}
</style>
</head>
<body>
<div id ="layout">单一列的固定宽度，让其居中显示</div>
</body>
</html>
预览效果图为：图
注意：以上代码在FireFox中测试正常，但在IE6中测试以上代码，一定要在顶部加入以下声明，用以定义XHTML文档类型。否则不能呈现居中样式,当然这个问题在IE7中已经不会再出现了。代码如下：
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
小知识：一个标准的XHTML必须以doctype标签作为开始。doctype用于定义文档类型。文档类型分为三种：分别为Transitional类型,Strict类型,Frameset类型。
Transitional是一种过渡类型，使用过渡类型的XHTML网页，浏览器对它的解析比较宽松。允许使用HTML4.01中的标签，但必须符合XHTML语法。
Strict是一种严格类型。浏览器对此类型的XHTML的解析相对严格。不允许使用任何表现样式的标识和属性，如在元素中直接使用背景色bgcolor属性。
代码如下：
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd">
Frameset框架型网页，如果网页使用了框架结构，有必要在文档中声明。代码如下：
程序代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd">
浙公网安备 33010602011771号