如何更好的理解div(二)
点击数：2786 发布时间2012-01-24 22:57:34
外从页面效果中发现，网页之中，除了文字之外，没有任何其他效果，两个DIV之间的关系，只是前后关系，并没有出现类似表格的田字型的形式，因此可以说从本质上实现了结构与样式的分离。 因此在CSS布局之中所需要的工作可以简单归集为两个步骤，首先使用DIV将内容标记出来，然后为这个div编写我们所需要的CSS样式。
div的与嵌套结构
div可以多层进行嵌套使用，嵌套的目的是为了实现更为复杂的页面排版，例如当设计一个网页时，首先需要有整体布局，需要产生头部、中部和底部，这也许会产生一个较复杂的div结构：
<div id="header">头部</div>
<div id="center">
<div id="left">左分栏</div>
<div id="right">右分栏</div>
</div>
<div id="footer">底部</div>
在代码中我们为每个div定义了id名称以供识别。可以看到id为header,center和footer的3个div对象，它们这间属于并列关系，一个接着一个，它们在网页的布局结构之中，如果以垂直方向的布局为例，代表的是如右图所示的一种布局关系。
|
header |
|
header |
|
|
left |
right |
|
|
center |
|
|
footer |
footer |
|
而在center之中，为了内容需要，我们有可能在center中使用一个左右栏的布局，因此在center之中我们拥有两个分别id为left与right的div。这两个div本身是并列关系，而它们都处于center之中。
因此它们与center形成了一种嵌套关系，如果我们用CSS样式将left与right两个div控制为左右显示的话，那么它们最终的布局关系应当如左图所示。
而我们的网页布局，则将由这些嵌套着的div来构成，这便是内容或是结构（而非布局）。无论是多么复杂的结构，都可以使用div之间的并列与嵌套来实现。
