我该说些什么呢？我亲爱的朋友们。时隔多日，博客大巴的模板制作教程渐渐和大家见面了。感谢所有一直以来支持我的人，感谢你们！

 

这个时代的鲜明特征是个性化。该如何去形容个性化，我想即是表现出自我的修养和思想内涵。个人的是独特的，越是个人的越是个性。个性化体现渗透到了诸多领域。我正看着模板的个性化悄悄走来。尾随着Web标准的春风，博客模板的个性化和标准化制作成为诸多尚未接触Web标准的朋友一个心头大患。用句话形容：热锅上的蚂蚁---团团转。 

 

众多博客之中，我选择了博客大巴的模板制作来写这本教程。博客大巴的自定义模板用到了令人焦头烂额的Web标准代码。整个教程里用到的是XHTML+CSS来讲解的。Web标准有很多的理念，绪论将介绍一个对模板制作较深刻的理念：CSS的盒子模式（box-model）。 

 

 

什么是CSS的盒子模式？ 

 

CSS的盒子模式（box-model）通俗的讲是具备基本属性的块级元素。常用来布局的Div就是一个块级元素，它具备这样的基本属性：内容（content）、内补丁（padding）、外补丁（margin）、边框（border）。方方正正就像一个盒子（图x_1）。

 

 

 

 

若把Div和现实的盒子做对比介绍，内容相当于盒子里放的东西；内补丁相当于在里面放了层保护膜；外补丁相当于在外侧包了层保护膜；至于边框可以理解为盒子的材料。CSS的盒子模式并不难理解，把块级元素当作盒子一般看待。

 

CSS的盒子模式在博客模板之中的应用。 

 

正如我所提及，CSS的盒子模式在博客应用也是广泛深刻的。根据我这些时间制作模板的经验看的话，主要体现在这些方面：

  

层的块级化布局   博客模板的制作离不开布局。现在做布局的手段有两种：表格布局和层布局。XHTML的布局方式是层布局，所以，如果博客用的是XHTML的话，层的块级化布局便可以被运用了。可能你不知道什么叫层的块级化布局，因为这是我自己取的名字。XHTML里不叫层的块级化布局。

  

层的布局是指，布局之中仅仅使用最基本的块级元素，分离表现。这个和W3C的“表现和结构相分离”是相似的。层的块级化布局是指，用盒子模式的眼光看待块级元素。正如我的“离殇”模板，运用的就是纯层布局，我将所有的表现分离到了CSS之中（图x_2）。

 

  

 

在“代码图”之中，是否看不见任何样式？这就是我所说的层的布局。所谓的层的块级化布局则是下图所示（图x_3）。在其他方面，诸如层叠效果，或者层提示效果。这些都是运用层的块级化布局实现的，层叠是把层当做盒子般竖直堆放。层提示效果是把层当作盒子做隐显处理。

 

  

 

多变的博客布局   “层的块级化布局”是CSS盒子模式在博客模板的基础应用。另一方面，盒子还具备浮动、定位的特性，因此。多变的博客布局通常是靠CSS盒子的浮动或者定位实现的。有个很现实的例子，三行三列布局，运用CSS盒子模式如何实现？其实方法很简单：先做出一个三行的布局，中间一行为其用上绝对定位属性。然后在中行内嵌套三个盒子，一个向左浮动，一个向右浮动，中间那个则设置相对定位，并且设置left、right为0，然后加上外补丁（margin），让它在中间即可（图x_4）。由此看来，只要理解了CSS盒子模式，多变的布局便可以方便做出来。是不是呢？

 

 

 

好了，CSS盒子模式在博客模板的应用突出在这些方面，鉴于这样的方式，它亦给我们带来了些好处，便是下面所讲的：CSS盒子模式为模板制作带来什么。

 

CSS的盒子模式为博客制作带来什么？ 

 

CSS盒子模式到底带来了什么？缘何我会在这里反复提及，依照经验，CSS盒子模式主要带来了这些方面，这些方面对于模板制作而言，的确是很有影响：

 

更加专一的创作方式   暂且不去讨论层布局比表格布局有何优势，这里需要讲的是，CSS盒子模式下，我们的创作方式发生了改变，更加专一。 

 

因为我们所追求的盒子是单纯的盒子，分离了表现之后的盒子。因此，创作的方式一分为二：创作结构以及创作样式。相比从前，我想这样的方式更加专一，代码质量便也会随着上升。如何看到是变得专一呢？上文提及，创作方式一分为二，所以，我们创作的时候，便可以先创作结构，再进一步创作样式。两者相互分离却又相互依赖。 

 

结构和表现相分离   说这句话的时候，仿佛我在重述W3C的要求。不过，这句话的确可以使得我们的模板更臻完美。单独创作结构和样式，注定结构和表现是相分离的。深度的内容是没有必要去讨论的。只要明白：结构和表现相分离之后，模板会是怎么样子？ 

 

会是什么样子呢，对于结构部分而言，相对应的会比其他方式来得简洁，并非我膜拜权威，我不唯上，不唯书，只唯实。省去了表现、其他无用标签带来的体积问题。不用想，博客的进入速度将大大增加，请看我的“离殇”模板，不觉得用到的东西非常多么？如果我用其他的方式来布局，估计有一半的人不会光临，速度会变得超级慢！ 

 

然后对于样式而言，不存在于结构之中，模板就成了典型的CSS控制体了。也就是说，一个CSS主宰模板的一切，那么，这有何意义？无非是改版的时候只要改CSS文件而已。请注意梦梦的模板，是不是经常变化但结构却不怎么变？道理很简单，梦梦只是修改了CSS而已。 

 

兼容处理的方向   有些时候，辛辛苦苦做得模板在IE7下面显示正常，但到了其他浏览器，比如：FireFox之后，便一塌糊涂，尚未认识到CSS盒子模式时候，对于兼容问题该怎么办？  

 

首先不得不说的是，大部分兼容问题都是CSS盒子模式搞的鬼。因为各个浏览器对盒子模式解析的不一样，所以会有天差地别的改变。譬如：IE7下有2个相邻的盒子，左边一个设置了外补丁（margin），另一个没有。IE7下面正常，IE6下，右边的盒子可能会被迫下移（图x_5）。

 

 

  

 

 

这是IE7和IE6之间的解析差别，从图中不难看出，当我们的模板出现上述情况的时候，只要先确定是哪个盒子出现问题，然后根据盒子的ID或者Class去CSS文件里修改便可以解决兼容问题。大多数情况都是这样的，这也是兼容处理的方向。

 

总结的讲：当我们对模板做兼容处理的时候，是不是要整个文档去查看？不不不，针对性的去看。模板制作之后，每个盒子都会带上我们给它的ID或者Class。出现兼容问题的时候，先看看是哪个盒子出现的问题，凭借它的ID或者Class去CSS文件里找。之后，找到造成兼容问题的地方，处理掉。 

 

感谢你的耐心阅读，我的朋友们，CSS盒子模式是Div排版的核心理念，如果掌握了这个理念，很多的模板问题都会迎刃而解。今后的教程也会延续这个理念，因为模板的布局制作离不开这个理念。 

 

谢谢阅读！ 迷殇修订于2007年12月1日。