刚开始的时候已经讲过，对于理解CSS，大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。
1、div的意义所在:
div是一个容器，在使用时以
形式存在。
在XHTML中，每一个标签都可以称作是容器，能够放置内容。但div是XHTML中专门用于布局设计的容器对象。
在传统的表格布局中，完全依赖于表格对象table,在页面中绘制多个单元格，在表格中放置内容，达到排版目的。
而以div对象为核心的页面布局中，只需要用DIV和css便可以实现布局，因此习惯上对css布局称为div+css布局。
2、div只是一个区域标识，如果实用了div，但没有应用div的css样式的话，就等于只看到div的内容，而没有任何样式改观。这一点与使用表格布局有一点不同，如在实现左右分栏的时候，表格可以看到分栏效果，但没有应用css的div 只作为一个区域标识，没有改观。看如下代码实现的效果对比：
程序代码
/*此table加载自身默认的样式*/
超级宝贝，步步为营，实战div+css系列教程 |
超级宝贝，步步为营，实战div+css系列教程 |
超级宝贝，步步为营，实战div+css系列教程
/*此div未加任何样式*/
超级宝贝，步步为营，实战div+css系列教程
展示效果图：
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来编写样式。
568
收藏
