刚开始的时候已经讲过,对于理解CSS,大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。
1、div的意义所在:
div是一个容器,在使用时以<div></div>形式存在。
在XHTML中,每一个标签都可以称作是容器,能够放置内容。但div是XHTML中专门用于布局设计的容器对象。
在传统的表格布局中,完全依赖于表格对象table,在页面中绘制多个单元格,在表格中放置内容,达到排版目的。
而以div对象为核心的页面布局中,只需要用DIV和css便可以实现布局,因此习惯上对css布局称为div+css布局。

2、div只是一个区域标识,如果实用了div,但没有应用div的css样式的话,就等于只看到div的内容,而没有任何样式改观。这一点与使用表格布局有一点不同,如在实现左右分栏的时候,表格可以看到分栏效果,但没有应用css的div 只作为一个区域标识,没有改观。看如下代码实现的效果对比:

XML/HTML代码
  1. <table width=“100%” border=“1”> <!–此table加载自身默认的样式  –>
  2. <tr>
  3. <td>寂寞部屋,寻找一片属于我的避风港……</td>
  4. <td>寂寞部屋,寻找一片属于我的避风港……</td>
  5. </tr>
  6. </table>
  7. <div>寂寞部屋,寻找一片属于我的避风港……</div> <!–*此div未加任何样式 –>
  8. <div>寂寞部屋,寻找一片属于我的避风港……</div>
  9. </body>

table显示了左右分栏,且边框按其默认的边框粗为1的样式展现。
div没有应用css样式,两行也不会分栏显示,也看不出有任何效果。正如上文所言,div 只是一个区域标识,划定了一个区域,而样式的责任交给了css 来处理。

那么怎么才能显示出分列的效果呢?
细心的朋友会发现div容器内的内容没有变化,但在DW编辑器里看出div默认的是整行显示,另一个div则排在下方,而且每一个div都是100%宽度。用W3C官方的说法,div是一个块对象(block对象),在XHTML中,几乎所有的对象都是默认两种类型:
block 块对象:块对象指的是当前对象显示为一个块,默认为整行显示,下一对象在下一行显示。
in-line 行间对象(内联对象):此类型与前者相反,它允许下一对象在与它本身的一行中显示。

正是由于div的内容没有效果出现,实现样式需要借助于css,才实现了内容与样式的分离,这样的分离,使得div的最终效果是由css来编写的。css可以实现左右分栏,可以实现上下分栏,而表格则没有这么大的灵活性。css与div内容的无关性,决定了div在设计上有极大的伸缩性,而不拘泥于单元格固定的模式束缚。
因此,实现css的布局,首先在XHTML中将内容用div标记出来,然后再用css来编写样式。

原文地址:http://www.chaojibaby.com/blog/article.asp?id=107