CSS雕虫小技：八卦五行布图法介绍

[b]本质和优点
[/b]
先申明一下，这里不是在谈玄论道，说八卦五行，我只是利用了一下这几个数字传统的知名度，以及阴阳说中问题归纳和状态演化的技法。


这里所说的布图，就是一种将诺干背景小图片合并在一起（传说中的CSS滑动门技术）；这里说的布图说的就是如何组织这些零散的小图片。


[b]口诛笔伐：糟糕的绝对位置布图法：[/b]

常见的办法是把一堆相关的图片通过绝对位置放在一个文件中，比如【0，0】放置一个编辑按钮，【0，40】放置一个删除按钮【0，60】放置一个保存按钮。等等。

如此最大的问题是：无关的图片被杂乱无章的堆砌在一起。后期的维护将越来越繁琐。最后将是一场噩梦。
那么，我们如何更好的布图呢？

首先，让我们抛弃我们使用绝对位置的习惯，理由是：

[i]1.绝对位置不便记忆：[/i]
绝对位置都是一些数字标示，非常难记，相对位置是个有限集合，绝对位置有无限的状态。

[i]2.绝对位置不便适应需求的变更：[/i]
比如我们一个小图片，最初是 18*18，于是，我们布图的时候，间隔为20.
但是后来开发了一套大图标皮肤，小图标的大小变成21*21，溢出了。。。,改吧，慢慢改吧，我们有的是时间。。。

[i]3.绝对位置在编辑的时候也比较麻烦：[/i]
而相对位置，你可能只要打开你的布局管理器，轻轻点击几下对齐图标。
如果有一些小调整，绝对位置布局的时候，我们要小心的计算出新的布局位置，更新文档，更新相关代码，通知相关工程师。。。。

[i]4.增加沟通成本：[/i]
因为绝对位置的无穷性，我们无法给数值表示的相对位置赋予通用的适合的语意，无穷的状态我们需要依赖无穷的文档。

（我们估计没有这种文档，一旦需要调整，打电话问吧，希望你能找对人。。。）。

而相对位置，只有有限的状态，我们可以清晰的给出位置的约定语意。文档的最高境界也就是不需要文档。

[i]5.糟糕的自适应性：[/i]
这点不必解释，绝对布图法根本就不具备这一特征。

[b]
太极生两仪，两仪生四相，四相生八卦。[/b]

最朴素的图标只有一个状态，这很简单，我们制作一张很朴素的图片即可。
然后我们想加上一个鼠标放上去的激活效果。于是我们有了两种状态。这时候，我们可以采用左右两端布图。
之后呢，鼠标按下去是不是也要有一个新的状态？哦，还差点忘了，更重要的，功能禁用了我们也需要一个状态。至此四大天王到齐了，各自找个角落呆着吧。

我们常见的也就是这四种状态：
1.正常：
2.鼠标放上
3.鼠标点击
4.禁用


如果我把这四种状态自左上起，顺时针排列，我们还可以达到一个惊人的自适应性。
当我们只准备了一个图标的时候，吧他做成整幅度的图片，那么四种状态都显示为正常的图标。
需要增加状态2的时候，只需要扩展右段新图片。同样，一切正常（disablle状态不被支持，显示为正常状态，按下和鼠标移上效果一致也是一个理想的巧合）。
当需要鼠标按下的时候，扩展下方图标。同样，一切正常。

这四种状态的组合，我称之为斜四相。对应样式单为 ".quad-x-"

但是，我们的八卦可是有八个方位的，不要轻易浪费了，怎么办呢？

老子说了："万物负阴而抱阳，冲气以为和"。

这是我们客观世界普遍纯在的规律。

比如，我们有一个展开的图标，那么我们极有可能需要一个关闭的图标。我们有一个保存按钮，那么，我们极有可能也需要一个打开的功能。

这两类事物相互对立的东西必然有紧密关联，完全应该安排在一起。

于是，我们吧原来的布局位置，顺时针旋转45度，一个正四相产生了。对应样式为：“.quad-y-”


待续。。。。