根本不存在DIV+CSS布局这回事

原文：http://www.cnblogs.com/cathsfz/archive/2007/04/09/706336.html

在《欲练 CSS ，必先宫 IE》和《你有 <table /> 强迫症吗？》这两篇文章中，看到有不少评论用到div+CSS布局这个说法，用来和table布局比较。实际上div不是用来布局的，div只是用来表示一个其它元素都无法准确表达语意的一个块区，只有CSS是用于布局的，所以根本就不存在div+CSS布局这回事。反过来，table布局的时候经常依赖于CSS定义一个单元格的布局属性，所以可以说是table+CSS布局。也就是说，我们讨论的两种主流布局方法应该是纯CSS布局和table+CSS布局，如果你觉得你在用的是div+CSS布局，那么有可能你也有强迫症了。

接下来我们说说如何进行纯CSS布局，因为CSS布局依赖于XHTML，所以我们先要说说如何书写一个CSS无关的XHTML。其实书写CSS无关的XHTML并不难，虽然你不能再好像书写table布局代码那样集中精力于最重的视觉效果上，但其难度也不过是中学生写作文那样。

中学生写作文如何写呢？首先看看题目，然后想想整篇文章分为哪几个大的段落，每个大的段落说些什么，能够把你要说的东西说清楚。对于XHTML来说，这相当于用div把文档切割为几大块。这时候你不要想着这些div将构建一个怎样的DOM啊、CSS如何选择DOM中元素设置规则实现布局之类的事情，就大概划分一下文档的大区域就好了。

然后当然是用一些常用的手法来表现感情或者论证问题，这在XHTML中就是用特定的元素来完成一些常见的信息组织。下面就是信息组织形式与元素的对应列表。

img

作为内容的图片是一定要放到img里面的，这没有更好的选择了。然而如果图片不是作为内容，而是作为修饰性的，则千万不要用img。对于非内容的图片，应该在CSS中引用，而不在XHTML中出现。例如每一个导航链接有一个前导的箭头指示，那么这些箭头就应该通过CSS的background-image属性加上去，而不是直接作为img出现。

a

这也是一个非常准确定义的元素，链接都需要使用它。或许已经有很多人忘记了a的本意是锚点，其实这是一个十分有用的语义，你可以用它来标记文档中一些重要的引用位置。

ul, ol

ul和ol分别是什么意思呢？如果你回答不上来，却知道它们可以用来干什么，那证明你是被可视化工具宠坏了，要转换过来编写符合语义的XHTML需要先补充基础知识，这时候你最好先找一些看起来非常基础非常全面的XHTML书籍看看，因为没有扎实的基础你在上面构建更多的知识都是不牢固的。ul和ol其实分别代表unordered list和ordered list，也就是无序列表和有序列表。在语义上，它们都用于表示一类并列关系的内容，例如我们去商店购物之前列一张shopping list，上面要买的东西就是并列关系，在中文可以用顿号隔开那种。它们的差别在于是否有顺序，例如shopping list是没顺序的，先买什么后买什么是没关系的，但是一份旅游行程安排上面的景点列表却是有游览的先后顺序的。

ul常用于导航栏，因为导航元素符合上面所说的并列关系，树状导航结构还可以通过嵌套ul来表述。在这里，导航可以是我们常见的水平或竖直导航栏，甚至可以是地图导航，例如在中国地图上不同的省份热区其实是不同的li。如果我说，在主流浏览器上用户看到了中国地图和可以直接点击省份热区，在不支持CSS的浏览器上用户能看到一份纯文本的省份名称列表，使用的是同一份XHTML，而这完全通过CSS实现，甚至不依赖于JavaScript，你相信吗？

另外，如果你要显示一个图库的缩略图，这些图片也可以放在ul中哦，因为这些图片也是并列关系。它们可以自动先横排，排满一行就自动排第二行，CSS可以让他们乖乖排队，而不需好像table那样把图片定死在一个格子里。其实table用于布局就如同用监狱关押内容一样，把内容锁死在一个格子里不让它到处乱跑；符合语义的XHTML就如同一个开放的舞台，你只要懂得利用CSS的规则，内容就自然会找一个适合表现自己的地方站着。

[1] [2] 下一页