最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。

vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下：

p {
    font-size: 18px;
    line-height: 36px;
    font-family: Tahoma, sans-serif;
}
img {
    vertical-align: bottom ;
}

然后大家看一看这段CSS在各个浏览器中的效果（图片是我故意做成那个样子，为了可以看清楚相对位置）：

呃，这个结果其实很让人匪夷所思，一般我会认为Firefox会比IE解释得更正确，但是看过Opera之后发现它和IE是一样的，而Safari/Win是站在Firefox那边。说实话，我不知道这是怎么回事。

仔细学习了《CSS权威指南（第二版）》，甚至还去查阅了W3C，然后自己做出一个关于vertical-align的图：

按照W3C的定义，当内联元素的vertical-align设置为：

• baseline, top, bottom的时候，都是该元素的baseline（或middle, top, bottom）对其周围元素的相同位置，如图片的top和周围文字的top对齐。
• text-top和text-bottom的时候，是该元素的top（或bottom）对齐周围元素的text-top（或text-bottom）。
• 长度（%, em, ex)的时候，是基于baseline往上移动，所以正数往上，负数往下。
• middle的时候，是该元素的中心对齐周围元素的中心。这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。

但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。

最后给大家一个测试页面，可以方面的看看各个浏览器对vertical-align不同值的解释结果。

“吊扇”这个东西现在也渐渐少看到了。我前几天望着天花板发呆的时候忽然注意到吊扇上的一个设计。先拍下来给大家看看（手机拍的，效果不好，将就看吧～）：

注意中间那个亮亮的螺旋图案。是不是经常在各种吊扇上看到？所以为什么都用这个螺旋的图案放在吊扇的中间呢？

首先，吊扇是要转的，如果放一朵花在中间，转起来就看不到了。所以第一个结论是：装饰图案一定要在产品使用的时候也能很好的表现。有一个很常见的例子便是笔记本外壳的LOGO。当你把你的笔记本合上，从正面看，LOGO一定是倒过来的，因为笔记本外壳上的LOGO在更多的时候是在你立起盖子使用时展示给你对面的人看的。我花了很大力气在网上找到一个古老的Acer机型，它的LOGO很小，在合上的时候看起来是正的：

设想你在做presentation的时候，观众看到的你的笔记本LOGO一直是倒着的，是不是有点小小的滑稽？

回到吊扇，其实如果是同心圆的话，也可以保证转的时候图案不会看不清，但同心圆会一直不变，或许这样会觉得缺乏动感。而螺旋有个好处就是，它看上去是往外（或往内）扩散，而不是转动。所以无论电扇转动多块，它变化的速度都足以让我们看清楚。可能这点对于吊扇有点太多余（我们可以通过扇叶转动的声音来判断电扇的速度），但是扩展的想一下，其实这个设计很妙，用一定的斜率可以让图案变化的速度低于载体移动的速度，或是改变图案运动的方向。这在一些特殊的地方会可以有很好的应用。比如，呃，好吧，随便设想有一个金属的棍子，它会快速的转动（可能是某种机械里的轴承），我们需要知道它转动的速度，那就可以在它的表面设计出如下的花纹：

这样通过有斜度的花纹就可以降低视觉上移动的速度，从而得到关于转动速度的反馈。

这是去年在复习HTML标签的时候顺便制作的一个文档，里面包含了(几乎)所有的HTML标签。一方面是作为一个归纳，可以通过这个看到哪些其实可以用但是被我们忽略掉的标签，另一方面也是用来测试一些对HTML定义默认样式的样式表，可以把你自己定义的默认样式表放进去测试一下，看看是不是所有的HTML标签都定义到了。

当前版本号是1.2。全部代码在下面的文字框内。也可以点此处下载该htm文件。

P.S. 用来测试了一下著名的YUI里的reset.css，有一点点小问题。哈~