根本不存在 DIV + CSS 布局这回事_html/css_WEB-ITnose

在《欲练 CSS ，必先宫 IE》和《你有 强迫症吗？》这两篇文章中，看到有不少评论用到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的规则，内容就自然会找一个适合表现自己的地方站着。

dl

没有听说过dl吗？因为那些可视化工具生成的代码中从来不会出现dl？dl的意思是definition list，也就是定义列表。它包含的子元素不是li，而是dt和dd，也就是definition term和definition description。dl本身设计为字典单词与解释列表这样的语义，例如：

Apple

苹果

Boy

男孩

然而，如果你需要表示的的语义也是类似的，一个列表既包含定义也包含解释，那么也可以考虑用dl。

form, input

form也就是表单啦，这没什么好说的，就算再不顾及语义的人在书写XHTML时也会考虑到它与各种input对提交数据的影响，从而小心谨慎。

table

table自然是用来表示表格的，这不废话！如果是数据表，当然可以用table来表示，但如果不是，就最好别用table了。

人名列表呢？例如一个3行4列的人名列表。如果这12个人名是并列关系，我建议你用ul和12个li来表示，再通过CSS来让它们在一行内并列显示多个。名片表呢？也就是3行8列，每两列中左侧一列显示人名右侧一列显示电话地址等联系方式。我觉得dl在一定程度上能满足此需求，dt放人名，dd放联系方式，不过这时候就涉及了dl滥用的争论，因为人名与联系方式当作定义与解释有点牵强。

接下来还有一个关于你是否系统学习过XHTML的小提问，那就是你是否知道table下面的caption、col、colgroup、thead、tbody、tfoot元素及summary属性分别用于定义什么，还有就是你书写table时是否会使用thead、tbody。

div, span

再次审阅上面的列表，如果你需要表示一个块区却无法在上面找到更适合的元素，那么你就可以考虑使用div和span这两个最没有语义的元素了。div与span的区别，历史上的不说了，现在通常大块的区域用div，行内的小文本片段就用span。在上面我已经说了div一般用于全局划分为几个大的区域，所以一般不需要使用了。span其实也很少使用，因为行内的强调通常可以用语义更强的元素例如strong和em。

在理解上上述那么多常用元素后，写一个XHTML就真的如同中学生写作文一样容易啦，还是搭积木那样，其实和以前使用可使化工具搭积木没什么不同，唯一不同是现在你理解了你在搭的是什么，而以前你只在乎搭出你想要的视觉效果来。写代码与写作文所类似的地方，就在于你写得越多就越熟练，也就越能写出好东西来。在写好XHTML后我们就要开始考虑如何写CSS了，或许还需要在XHTML中略作修改以方便CSS中规则的选择与匹配，不过这是以后再说的内容了，今天就说到这里。

最后，如果你有兴趣阅读我以后发表的有关CSS的文章，可以考虑订阅我的blog：

Cat in Chinese (feed: http://feeds.feedburner.com/CatChen/Chinese) Cat in dotNET (feed: http://feeds.feedburner.com/CatChen/dotNET)