第二篇　DIV+CSS布局

第12章　为什么用DIV布局

DIV是HTML中的标记，也称作层，用DIV布局也可说成用层布局。DIV标记对是用来布局的，结合层叠样式层设计出完美的网页，这样做比以前的TABLE布局有更多好处，而且更接近标准。

DIV标记主要用来布局，在布局中，可以作为容器使用，可包含其他对象，如表格、表单、文本和图像等，DIV标记中还可以嵌套DIV标记，而且层数没有限制，每个DIV标记与最近的DIV结束标记符（＜/div＞）相配对，且每个DIV必须有一个DIV结束符与之对应。

学习本章，将会了解以下内容：

❑DIV与TABLE布局的不同；

❑如何用DIV布局；

❑使用DIV的注意事项；

❑DIV布局实例手把手。

12.1　DIV与TABLE布局比较

大部分网站都往W3C标准靠近，对于初学者，先学好基础知识，然后结合W3C标准，使网页质量提高。本节除了介绍基本的DIV外，还比较了DIV与TABLE的区别。

12.1.1　什么是DIV

DIV是标记对，表示一个层，里面包含HTML代码，也可以被HTML标记包围。DIV的属性也很多，都是用来控制DIV的，下面的代码表示就是一个DIV。

＜div＞

＜p＞我是一个DIV！

＜/div＞

以上代码在DIV标记对中，包含了一个段落，这时的效果和在＜body＞＜/body＞中输入一段落一样，因为对＜div＞没有设置，稍后会讲到如何设置DIV。DIV标记对可以嵌套，嵌套的深度没有限制，但必须每个＜div＞都能对应一个＜/div＞，而且＜div＞与最近的一个＜/div＞相匹配，有人把外围的DIV称为DIV容器，包含很多层，代码12.1表示层与层之间的嵌套。

代码12.1　源代码\第12章\层嵌套.html

01 ＜div＞

02 ＜div＞这是第一子层＜/div＞

03 ＜div＞这是第二子层，我们都被第一个DIV包含着＜/div＞

04 ＜/div＞

【代码解析】代码12.1中有3个层，第一个是层容器，包含着两个子层，默认的层占用的宽度是100%，所以两个子层上的内容占两行，效果如图12.1所示。

图　12.1　层嵌套