2007年4月9日星期一

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

在《欲练 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的规则,内容就自然会找一个适合表现自己的地方站着。

dl

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

然而,如果你需要表示的的语义也是类似的,一个列表既包含定义也包含解释,那么也可以考虑用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:

7 条评论:

  1. 老兄定义准确,锋芒焉露。我喜欢。

    其实那些人根本就是不懂得div和xml(现在的xhtml)。
    我想请教你的问题是:如何做到两列容器不随着窗口变小而变成一列?

    就是相对位置固定。看你的blogger就是相对固定的。
    联系我吧。好么?
    telecum at qq dot com

    回复删除
  2. 老兄呀,能不能教我怎样 让div 相对固定?(blogger的)

    网上的那些家伙都是纸上谈兵,说出来的答案跟放屁一样。没有一个是可以的。
    都在窗口缩小的时候把那布局给弄乱了。变成了一行。

    回复删除
  3. 如果你觉得自己的CSS基础都没问题,那么我建议你去看看《精通CSS》这本书,大多数这些问题你看这本书之后都能解决。如果你对中文版没信心,你可以去找英文原版CSS Mastery来看。

    回复删除
  4. 老兄你的朋友来了。
    我知道你忙。
    再忙也要来和我们交流是吧。

    八成在你的指引下,才有了这个google的bl站。。。。。。。。。。
    我是想让你pp一下。给个看法。你觉得哪儿有什么缺点?-地址给你-请看。。。。。。。。。http://www.prisonbreakall.com/

    回复删除
  5. 我在Cat in dotNET给你留言了吧,让你直接在那边给我发PM,可能你之后没有留意到吧。

    你的网站我是在Firefox下面浏览的,感觉排版可以再优化一下吧,让它显得更加整洁同时能适应不同宽度的内容(特别是图片)。

    回复删除
  6. 我在Cat in dotNET给你留言了吧,让你直接在那边给我发PM,可能你之后没有留意到吧。

    你的网站我是在Firefox下面浏览的,感觉排版可以再优化一下吧,让它显得更加整洁同时能适应不同宽度的内容(特别是图片)。
    ------------------------------
    1 排版还可以优化?我看不出来。
    2 我的版面和月光的版面一模一样。他的版面在800*600显示器分辨率下出现底部滚动条。我的也出现。

    3 我想确认界面会不会随着窗口大小变化而乱掉。尤其注意在窗口开得不大不小的时候。

    回复删除
  7. 如果你觉得自己的CSS基础都没问题,那么我建议你去看看《精通CSS》这本书,大多数这些问题你看这本书之后都能解决。如果你对中文版没信心,你可以去找英文原版CSS Mastery来看。
    *******************************

    我要看就看英文的。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

    回复删除