点击缩略图下载1920x1080px。

“遥襟甫畅，逸兴遄飞”出自王勃的《滕王阁序》。

经过前天的打击、昨天的消沉和今天的不甘，终于新的 WordPress Theme 上线了。

命名为 Bokeh，来源于 abduzeedo 家的教程。

其实这一次的设计参考了别人的作品，我做的，只是想把积累了很久的 CSS3 的认识一股脑倾泻出来。工作3年多了，每次都要为了若干远古时代的浏览器去牺牲尝鲜的机会，只能在低级别的 CSS 特性和各种各样的浏览器兼容问题见打转，烦闷，憋屈，无解。不过自己的一亩三分地，终于还是可以发泄一下，哪怕只是自己一个人看到感觉到快捷神奇强大的 CSS3，也是美好的。不是我想拒人于千里之外，只是我厌倦了在浏览器之间做好好先生。工作，生活，总还是有些区别会有快乐吧。

HTML5 嘛……打算过阵子再升级这个theme的时候，再尝试。一次兴奋过度，会导致其后长时间的疲软。

1. 在中英文混排的情况下，对于IE6的行高bug，推荐还是先统一为中文字体（宋体或者雅黑），再使用 vertical-align: middle; 可以减少时间上的浪费。

2. IE6一个已知的BUG：当某position:relative元素被带有overflow:auto/scroll 属性的块级元素包含时，会表现出postion:absolute 的行为。 解决方法： 1.为包含块元素添加属性 position:relative 。2.把该元素的position:relative属性去掉，使用默认的 static 定位，并通过 margin 等属性实现类似的效果。

3. IE6的z-index bug，可在需要浮在上方的元素中添加 iframe 且设置为同等宽高 z-index 位于其下，则可借助IE6“将iframe浮于所有元素之上”解决：这是个贱方法，没事儿千万别用。

4. IE6重复内容bug：一个元素包含2两个具有 float 样式的子元素；第二个子元素的宽度大于父元素的宽度，或者父元素宽度减去第二个子元素宽度的值小于3px；第二个子元素前存在注释。如果满足以上条件，第二个子元素中的内容会部分重复出现。

5. IE6中，DOCTYPE 之前有任何非空字符都会触发怪异模式；在IE7下，DOCTYPE 之前有XML文档声明不触发，但在 DOCTYPE 和XML文档声明之间有任何非空字符仍然会触发怪异模式。

6. 对于IE6把 height 当作 min-height 的状况，overflow: hidden 有时真是一剂救命良方。

7. 对于块级元素与行内级元素，除了盒模型在纵向上的差异，布局上的影响也值得留意——行内级元素在拥有position、float属性之后会表现出部分块级元素的属性。

8. 在写完 float + margin 的配合之后，顺手在IE6样式中带一句display: inline;可以省却很多日后不必要的麻烦

小时候有想过：飞机飞那么高，会不会看到天堂的样子？

稍微懂一点天文地理之后有想过：是不是神是住在宇宙之外的，所以飞机、卫星、航天飞机都看不到？大爆炸前的奇点对神来说或许就是一颗胡桃。

幼稚+有神论+科学，在成年人——比如现在的我——看起来，总是感觉很荒诞。

素材来源：天空，峭壁，树，绿地，溪水来自桌面城市，飞机，海鸥，热气球来自素材辞典。

灵感来源于最近电梯里的环保宣传——“熄灯一小时”？名字记不清楚了，反正就是晚上关一个小时灯、节约能源拯救地球的一个活动。

素材的来源有点散乱……灯泡来自站酷，云来自于素材辞典，山丘来自sxc.hu，湖面来自UmbraDeNoapte-Stock，海豚和海底的礁石来自桌面城市。

不是第一次尝试制作这种拼贴，但确实是第一次有一个比较完整的可以成为“作品”的东西 虽然还是显得简陋了一点，不过，总还是要比丢在硬盘里无数的失败品好很多（不知道为什么想起了爱因斯坦“更差的小板凳”的故事，哈哈）。

以前总是觉得照着别人的教程做就一定可以做出东西，真正自己做的时候，才发觉很不一样——就算 step by step 完全照做，也总会和别人的完成图有差异，甚至在刚开始的时候经常搞不清楚为什么别人一下子就从步骤 a 跳到了步骤 b 而自己怎么都找不到该按的那个键。经过了很长时间练习抠图、调整光影、搭配色彩，终于看到了一点进步。

希望这是一个好的开始。

Updates:

1. Redesign every pages
2. Upgrade to WordPress 2.6
3. Add “tag cloud” page tamplate

Download(.zip, 62.4KB)

经过一年多，Purple Heart 终于 reborn 了

Updates:

1. Redesign every pages
2. Upgrade to WordPress 2.6
3. Add “tag cloud” page tamplate

其实这次的升级是一时兴起，用了周末两天加今天就算是完工了。可能是最近过剩的精力需要发泄，又想写 blog 了。其实一直以来，做了那么多的 WordPress Theme，也就是对 Purple Heart 比较满意。对 HTML、CSS、Usability 日益精熟，似乎不表现在自己的站点上总说不过去。我想这个 theme 我会用很久，毕竟，它经过了一年看起来还是那么特别，这本身就好似一个奇迹。

这周作为测试，顺便整理一下整个 blog ——包括800多篇文章……没事找事就此开始……

最近眼睛恢复得不错，每天可以看电脑半小时后休息半小时再看半小时这么玩上一会儿了。想起之前很多没做完的工作，就捡起了 Underbrush。

这次升级后版本号为 0.3，主要更新的部分有——

1. 改进图片格式和质量，使得图片总体大小缩小70%；
2. 依据 wordpress 官方文档修改了主题的HTML标签以及CSS样式，大大增强了可读性和可维护性；
3. 在 sidebar 区块标题使用 sIFR （nightly版本）技术，不再依赖呆板的图片替换技术，美中不足是对中文支持欠佳；
4. 添加专门针对IE6的hack，添加对IE6下png的支持；
5. 大量细节修正。

几乎可以算是重写了半数代码，对自己以前的幼稚很汗颜。

自己测试两天，没问题的话劳动节后放出正式版本。

Author: Fuiun/风凝
Version: 0.2i
Download

可能是当初脑子发热，或者是拿ie5当作了ie6，当我再次面对 Underbrush 0.2 的 CSS 代码时，我脑海里就出现了一行字——

“猪八戒是怎么死的？笨死的。”

其实归根结底，这些看似要命的bug基本都是我在修正0.1时候犯下的——而那个时候，我正过度依赖 CSSVista 中自带的所见即所得编辑器。看来，不能以来所见即所得编辑器啊，因为见到的真的和写出来的东西大相径庭——或许我唯一用过的真正可以成为“所见即所得”的东东，是 Photoshop…

下面，历数一下偶在 0.2 版本时犯下的问题吧，权当自勉——

• 传说中的 header 左边有缝隙的问题——是我当时为了适应 CSSVista 中的 IE6 添加了 -10px 的margin-left
• IE6下左边栏搜索和Fx不同——是偶太懒或者是太烂，不知道 position 的强大之处
• 右边总是有一像素的空白——我错误得计算了背景图片的宽度，导致了 #wrapper 窄了1px，出现了右边的一像素空白

至于看不懂偶写的CSS这个问题，我觉得还是属于个人习惯——偶就是为了防止以后自己看不懂而添加了大量的注释，并且分割了很多的块。看来习惯的力量的确是无穷啊…

偶最近一段时间其实还是有东西可以写的，但是实在是忙+懒。等周末，偶一定好好表现

大脑正常以后，灵感也比平时多了些。用了几天时间，完成了这个PSD的 wordpress 主题效果图，感觉上基本还不错。明眼人或许一眼就看出这次的样式和之前的 purple heart 实在是太像。说起来风凝这次也没打算在左中右或者上中下上面盘桓，只是想在正文以外的东西布局上花点心思。这次将很多平日里横着或者竖着的东东交错着叠在了一起，感觉还不错。目前暂时没有确定的就是 RSS 放置的位置，打算等 XHTML+CSS 完成以后再定夺。

鉴于这次设计稿算是风凝玩 wordpress theme 以来最细致的一次，也欢迎大家多替意见。名字“若拙”，只是取这次设计有太多“雷同”之意；英文写作“raja”，也算是声明这里是夜摩罗/风凝的住所——玩双重人格？这主意不错

Author: Fuiun/风凝
Version: 0.2
Download

由于风凝的大猪头啊大猪头行为，解决 bug 的事情一直拖到今天才完——看来以后不能只检查3天就放出下载……经过大家的提点，目前共计解决如下问题——

• IE6下的错位（感谢青衣）
• blog页面中页脚翻页链接失效（感谢hhalloyy）
• 单独文章显示页面标题距文章过宽
• 林林总总的小问题以至于我已经想不起来 o( _ _)o

如果大家能不计前嫌，接受风凝诚恳的道歉，继续帮偶排查 bug，风凝感激不尽……

对待超出容器范围的元素，一般常见的有两种解决方法：一种是添加滚动条（给容器添加overflow: auto），另一种就是隐藏元素超出范围的部分（给容器添加overflow: hidden）。虽然从可用性角度应该使用添加滚动条的方法以保证客户可以获得所需信息，但是在很多时候用隐藏的方法比较不会引起页面整体感觉混乱。不幸，世界上目前市场份额最大的浏览器——IE6——对于overflow: hidden的支持不佳。如果单单是给容器添加overflow: hidden很可能根本看不见任何效果。但是一旦容器有了固定的高度、宽度，overflow: hidden立刻就达到了期望的效果。

IE6由于其东家——微软——的市场份额巨大加之长达5年的没有更新，可能是目前市面上 bug 所知最多的浏览器。IE 有一个概念叫做“拥有布局”（hasLayout，如果装了 IE Developer Toolbar 可以在属性栏看到），“拥有布局”某种程度上可以理解为就是拥有固定宽高。有不少 IE6 的bug仅通过给元素添加固定宽高就可以解决，这个就是跟 IE 的“拥有布局”概念紧密相连的。似乎很多时候 IE 都认为只有“拥有布局”的元素才可以拥有别的一些属性，因此有些时候，IE6 明明支持的CSS属性非要等到“拥有”了“布局”才会正常工作。说起来这也不是很难解决的问题，但是动辄要添加固定宽高会无端增加不比较的限制。由于目前还没有更加的解决方案——你能保证你的客户都是用 Fx、Safari、Opera 吗——因此，只能将就一下，think like IE.

经过周末的折腾，总算是完成了这个wp主题。经过一系列调整，还算是满意吧，至少没有出什么大的纰漏。本来想加入 Lightbox 效果的，谁知道不管是用wp插件还是直接往里面加js脚本，效果都差强人意得厉害。算了，等哪天能精简 lightbox 的脚本到10k一下再考虑吧。

做这个皮肤没有遇到什么大的问题，稍微麻烦一点的就是顶部图片还是太大，再精简也都在50k以上；还有就是 sidebar 的标题们，都是用的文字替换，效果还是不能达到最理想的结果，唉……

先测试上三两天，如果还有更好的方法能解决顶部图片和文字替换的问题的话，那真是造化啊造化。最近还想重新整理一下自己以前的作品，然后设计个叶子作为展示。以前的gallery即将弃置，新的东东要叫什么名字，暂时还没有想好。

折腾了近半个月现在的blog皮肤——目前代号“eros”——没有任何进展。庞大的背景花纹载入过慢问题我头疼了很久，最后也没有找到更好的解决方法。原先基于 eros 样式开发的新 gallery 倒是引出了风凝进军AJAX的新热情。或许我本身也不擅长架构三栏的blog，总是弄得 sidebar 信息过剩强了正文的风头。近来也厌倦了顶头一条下面几列的模式，打算挑战一下以前没有尝试过的风格。

或许我就是一个慢热的人，某个灵感闪过，然后过上个把星期，才能把已经不知道飘到了哪里的灵感揪回来为我所用。目前的首页本身是一个很意外的收获，而直到前天，我才真正开始计划将这个意外收获好好利用。经过3天的折腾，最终有了现在的页面——Underbrush——

很朴素的页面，几乎朴素到了2002年的页面风格。纯粹的两栏结构，看起来几乎将所有的经历都花在了头部图片的设计上——实际上花时间最多的是色彩的选择和搭配，以及类似列表风格之类不太显眼的部分。某个瞬间我都要觉得自己的品味太老土了……

我想我不会半路放弃这个设计，并且会尽量在这个周末完成相应的 wordpress theme。除非在制作 wordpress theme 途中突然觉得令人作呕，我想我还是会坚持下来的。

Blog 模板换了有一段时间了，一直没有宣传是因为还不够完善，想慢工出细活。今天早上突然灵感乍现，连PS做图带制作成CSS+XHTML，一共花了4个小时。结果就是现在的首页的样子了。

近来在公司一直用1440*900的分辨率，作图什么的比以前爽了很多，页面什么的似乎也更加喜欢那种横跨整个页面的横条了。不过相比起以前的大红大绿，这次风凝选择了比较纤细的颜色，并且加入了同色系的浓淡对比。因为是要配合blog的感觉，基本上还是很素雅的，没有出格设计。

剩下的任务就是完善wp主题了。目前的版本号是0.5。等到0.9的时候，我就可以考虑放出下载了 ^^ 不过不知道会不会有人下了去，哈哈哈…

最近两周一直在学 Javascript。尽管没有任何的编程经验，也还是逼着自己一点一点啃完了语法。到目前为止，基本上还算是没有遇到什么太大的难题。从昨天起去 mootools 下载了一些脚本，随后便开始了自己的第一个 js 项目——搭建一个基于 javascript 的在线相册。

因为主要使用的是现成封装好的 lightbox 和 mootools 的 Fx.Element，因此在编写脚本上并没有花太大功夫，主要都是调整和熟悉别人对于 javascript 的使用——看着人家的代码，自惭形秽啊，怎么自己弄起来七死八活的东东别人用起来就那么行云流水呢？当年偷师别人的CSS的时候都没有过这样的感觉。一切在尚算顺利的状况下一瘸一拐地前进着，直到今天上午，直到刚才，直到我突发奇想关闭了 Fx 的 javascript 支持。

没了浏览器对于 javascripe 的支持，那个刚才还华丽丽的 gallery 变成了只有索引图片的一潭死水，任我把鼠标左键点得如小鸡啄米依然毫无反应。我愣住，随后想起去掉 CSS 之后自己写的页面，叹口气，关掉了那个死水 gallery 的页面。

最终，我还是忘记了使用 javascript 应该记住的第一要义：要预留退路，要在浏览器禁用 javascript 的时候依然能访问你想呈现的东西。

对我来说，挑战 javascript 其实应该属于不自量力的一种表现形式——如我这般凌乱的逻辑思维能力，看了半本黑格尔的《小逻辑》依然没用；再加上一穷二白的写代码经验，根本就是开自己的玩笑嘛。但是……还是下决心要挑战一下才肯罢休，毕竟不能一直都只是纠缠在如何将图片或者PSD变成 XHTML+CSS 上面。在看过了《DOM Scripting》之后，我终于鼓足了勇气奔着 javascript 而去，只是在我自以为领悟透了《Unix编程艺术》与《DOM Scripting》的要义之后还是犯了最要命的错误。

尽管 web 2.0 和 AJAX 一手把 javascript 的位置推到了它诞生以来的最高点，但是那段最臭名昭彰时代的阴影还是一直盘旋在它头上无法挥去。浏览器之间的兼容问题目前已经得到了很大的好转，但是随之而来的就是滥用的问题。使用 javascript 生成内容一直是 W3C 和各个web标准组织不推荐的，但是目前用 javascript 生成内容的页面依然比比皆是——如此一来的后果就是一旦浏览器禁用了 javascript 访问者就什么东西都看不到，只能冲着呆若木鸡的页面发愣。可能会有人嘲笑：这完全是杞人忧天啊，都 web 2.0 的时代了，难道还会有人禁用 javacript 不成？问题就是，的确会有一些人禁用浏览器的 javascript，有一些拦截广告的浏览器插件也是冲着 javascript 下手的，难道你一句“这些人毕竟是少数，我们的目标客户也不是这类人”就可以了么？

因此，最好的解决方法还是将所有的东西该呈现的都呈现出来，只是用 javascript 决定哪些该藏，那些该露，或者添加一些动画效果增强交互性；或者一些不重要的、仅仅是一些提示功能的内容——比如相册中点击某图片之后出现的 loading 动画——可以由 javascript 生成。永远都要预留退路，在退路的基础上再发挥，如此才可以保证将 javascript 很好得利用又不会发展为滥用。

或许我的 javascript 之路还有很长很长很长……一段要走。

现在要面临的问题就是，如何给我的 gallery 预留退路呢？以我现在的水平，要自己去重写出一个预留了退路的脚本根本就是天方夜谭……算了，还是踏踏实实，重新去看语法和别人的代码吧……

到北京以后的第二个星期重新温习了《The Zen of CSS Design》，加上最近接触的公司的项目和刚刚完成的 training project，对于 margin、padding 外加浮动布局这几位老朋友运用得更加娴熟，同时也比以前有了更深的认识。

之前我一直觉得为了避免IE对于盒模型的非标准理解应该尽量使用 margin，但是最近发现这种想法有点天真——首先，margin 纵向叠加的问题是所有浏览器都存在的；其次由于IE对于“拥有布局”的奇特定义，几乎所有的著名 IE bug ——双空白边浮动 bug、3像素文本偏移bug等等——都是跟浮动布局和 margin 过不去。因此web标准组织目前推荐是尽量使用padding，尤其是在浮动布局的时候。如果非要在浮动布局的时候使用 margin，还是事先就准备好解决方法的好。

相对于在一个 css 文件中使用大量 hacks for IE，现在的我更倾向于为IE的各个版本浏览器分别编写样式表——这样一来，在代码的修改和维护方面会更加方便，至少不用去眼花缭乱的找下划线 hack 或者花里胡哨的 Tantek 框模型 hack 了。风凝在刚刚完成的 training project 中便分别编写了针对现代浏览器、IE 7 和 IE 6 三个样式表。在分别处理针对 IE7 和IE6 的样式表的过程中，确实能感觉到对于这些浏览器对样式表的呈现方式有了全新的认识。以前在写一些 hack 的时候总会有误打误撞的感觉，这次却觉得自己在完好的理解了W3C标准之外，又可以很好的转换为 IE7 和 IE6 的理解模式，如此一来，思路更加连贯，编写起来也更加得心应手。

其实现在想想，padding 还是比较好的——关于它的 IE bug 只有盒模型一项，处理起来又十分简单。当年我居然会排斥 padding，真是鼠目寸光了一把。在这次的 training project 中需要做出三栏流体布局。感谢 padding，没有让我遇到很多麻烦，只是很少的一点加减法就解决了IE6中的显示问题——不得不说一下，这次的 project 风凝真的是一直都没离开 Windows 自带的计算器，只是不知道是该感谢微软的贴心设计还是对自己日益退化的心算能力脸红。

从目前的形势来看，只要微软帝国不倒，只要页面还需要流体布局（浮动布局），padding 总还是要比 margin 让人放心。其实说起来，float 真的比想象中要好用，除了需要对浮动元素进行清理，真的已经是很完美的控制了；而且经常可以将浮动的各个部分想象成漂浮在方形木盆里面的木块，木块之间的漂浮原则完全适用于浮动布局，比如假设两个相邻的浮动部分宽度总和大于它们的容器宽度，就会有一部分浮动到另一个下面——两块在木盆里的木块如果宽度之和大于盆子的时候，自然会有一块模板漂在另一个下面啊。有时候形象思维就是有助于思考，hiahia。

关于 margin 和 padding 以及跟他们有关的一切一切事情，我越来越不敢自称精通。停留于“知道自己不知道”的境界，期待着“不知道自己知道”的来临。关于这些没完没了的琐碎东东，不知道我能发现多少乐趣。

有阵子电脑不在宿舍，要上网什么的就要借用宿舍mm的电脑。她不是Fx用户，电脑里装的是Maxthon。打开Maxthon，一个start页面出现在我眼前——素净的页面空荡荡，只有一个空空如也的标签栏。我以为这是嵌入浏览器的另一个浏览器，搞不好还是有无界之类的特殊功能。怀着有点兴奋的心情点了15分钟，我失望地发现这不过是一个用来订阅RSS的页面——虽然后来知道它还有很多其他功能，但是我的确只发现了订阅ESS这一个功能。这一次经历给我留下了很深的印象：我用过的浏览器数量也不少，上过的站点也不少，但是这样一头雾水、设想和现实差距之大的确是第一次。

后来全面接触了“可用性设计”，每次想到的第一个都是那个神秘的start页面。难以言说的页面设计，让人不知如何下手。折腾了半天，却是不需要的功能。对我个人而言，这个就是完全失败的设计。当然了，也不能排除有人在这个start发现了很多有趣的东西，或者某个人正缺的就是RSS阅读器，或许只有我这么笨不知道这个页面该怎么用。我只是就我的体验说一下而已，无他。

相应的，我会想起iGoogle。ig未登录的时候就会有一些简单的模块加载，并且会提示登录以后可以自定义页面；登录以后也会有明显的提示告诉用户怎么添加模块。用ig的感觉不错，感觉一切都在自己的控制之下，不像用Maxthon的start，感觉像是在进行智力测试或者小白鼠在迷宫里找奶酪。

或许我应该重新思考 web design 这个不怎么新鲜的词。web design 并不是单纯的 Homepage design，web design 是一个完整的、完善的、整体的规划——对于站点的用途与功能的规划。设计也不纯粹是界面的东西，设计应当是设计师利用现有资源来实现客户需求的过程，在满足客户需求的基础上可以为客户多想一步，但是实现需求才是根本。如果基本需求都不能实现，只是将功夫下在花里胡哨的特效与骇人的界面设计上，纯粹是本末倒置。

架构、可用性，这才是站点最基本的东西。有了完善的架构保证功能的实现，有了出色的可用性设计保证了用户体验，界面的设计才能得到基本保证——当然也可以说基本的条框，如同在画框中绘画一般。或许 web 2.0 的简洁设计就是因为有了如上的保证才能得到一致好评：将用户注意力集中到出色的功能与体验上，去掉不必要的干扰视线的繁复设计，贯彻以简洁的风格。

当然，作为一个设计爱好者，我会喜欢设计繁复华丽的网站——这样的站点也多是设计/艺术类的站点或者就是设计师本人的blog。或许也就是这个原因才能去弄设计吧，不然就真的成了纯粹的“美工”了。正如《Don’t Make Me Think》中的那句话，不存在所谓的“普通用户”，每个用户都是特别的，独一无二的。可用性设计也不应是为了去追求“满足普通用户的用户体验”，而应该立志去实现“能让用户顺利使用网站提供的功能，并有一次良好的体验”。

说回Maxthon的start。我想这个start或许需要重新设计才能让我这样笨的人一拿到就知道该怎么用。如果觉得大段的文字说明过于无趣，至少可以提供一个demo让大家瞻仰学习。但就一根光秃秃的标签栏就想标榜自己的“简洁设计”，未免过于自欺欺人。可用性设计是因为有人用才会存在可用的问题，单凭自己的想象在那里yy别人使用时候的感觉就敢说自己是搞用户体验的，只能说是可笑。要是Maxthon哪天突然开窍了，决定找几个人来做一下实际的可用性测试，估计老板会发现眼前看到的实际情况和自己坐在老板桌后面偷笑想象的图景相去甚远。

———————
从6月2号毕业设计实验部分全部被推翻重来到今天，这段时间我除了去了趟北京，几乎100%的时间都投到了毕设设计实验和论文完成上面。这期间没有学习什么关于web抑或design的新东西，旧东西也多是在肚子里翻捡一下。今天跟猪猪说起Maxthon的事情，无意说到了start，便突然有了上面这些想法。

现在很多的想法都没有能够实施，而且自己也知道很多的想法会有些片面和幼稚。因为起步比较晚，基础的薄弱是我无法回避的一关。或许等我工作上半年以后，会有很多新的想法出现，也会有很多曾经的想法被推翻。现在的我只是更加地期待能尽早走上工作岗位，去体验那所谓的社会化大生产带来的冲击。

似乎不少初学 CSS 的人对定位问题都很感冒，尤其是 margin、padding，简直能要人老命（秋香？！）。不过风凝在当初学的时候并没有遇到太大阻力。这还是要归功于当初小打小闹画过一段时间漫画，为了投稿不得不学习了“边界”（margin）和“补白”（padding）的概念。

所谓”补白“，就是为了防止在印刷剪裁的时候造成白边而填充的内容——也有人往里面画搞笑四格的。一般的漫画杂志会要求将画面内容画满补白，但是不能在补白中画上重要的部分——有点像《名侦探柯南》动画组在自行制作一集动画的时候不能涉及主线和人物性格（笑）。而”边框“，一般就是一片空白——这里是不允许画上东西的，但是也不可或缺，在页面与内容之间保持一定距离避免过份拥挤。至于那个”边线“（border），就是边框与补白之间的一条蓝铅笔线——通常蓝铅笔线是不会被印刷出来的，所以会推荐使用蓝铅笔画边线。

其实 HTML 诞生之处就是为了给学术论文排版，因此只要稍加留意就会发觉 HTML 和 CSS 中的很多东西就是印刷术语。在 CSS 里看似抽象的 margin、padding，在印刷上其实是一个很简单的概念。嗯…不知道做平面的设计师对于 HTML 和 CSS 会不会比常人更敏锐，或许更敏锐的是排版工人吧

其实说来说去看来看去也不如自己动手写几行代码体会深刻——随便找一段文字或者一张图片，在它的选择器属性中设定宽度、背景图片/颜色、边框、padding、margin，来回复制粘贴几遍文字/图片的 HTML 代码，然后把东西拿到浏览器里面去看就一目了然了——元素和 padding 都是有背景的，而 margin 则是将文字/图片和其他的距离拉远。

效果怎么样？

如果你是个好孩子，应该会大叫一声：Oh no!

如果你真的测试了，你就会发现一些怪异的地方——纵向的 margin 重合了！这个现象当纵向相邻的元素 margin 值一样的时候尤为明显，似乎我们就只设定了顶部或者底部的 margin。纵向 margin 哪里去了？

Margin 和 padding 折磨人不仅仅是它们的定义不好掌握，也在于它们真的有点捉摸不定——有一个名词叫做“压缩边界”，就是说纵向相邻的边界压缩。这样有好处，那就是当我们需要编排一个纵向无序列表的时候，我们只需要写下

li { margin: 5px 0;}

就可以得到间距都是5像素的无序列表。压缩边界的坏处就如我上面提到的那个例子——当我们需要在 padding、边框以外再留出一段距离的时候该怎么办呢？

答：在相邻的元素的 margin 上动手脚吧。

上面这句话不是忽悠，是实打实的解决方案。只有这样才能保证出来的效果和你的预期以致——要知道，有时候捷径并非直线的那条路。不过还是有一个好消息的——压缩只应用于 margin，padding 和 border 不会被压缩。

目前流行的浏览器对于 margin、padding 的理解各有不同——现代浏览器们，比如 Firefox、Opera、Safari、IE7，都是按照web标准解释的，那就是元素框宽度=margin+border+padding+ width；而IE6及其更低版本，却将width理解为元素宽度+padding，既元素框宽度=margin+border+width——所以我经常怀疑IE6及其更低版本的开发者以前是给漫画社供稿的。因此在浏览器兼容性问题中，遇到最频繁的问题是 width/height 的问题。遇到这种bug，下划线 hack 和 !IMPORTANT hack 是最简便易行的解决方法。

Margin 和 padding 之所以重要，是因为它们承担了定位的任务——web标准不提倡 table 排版而是大力提倡使用CSS，margin 和 padding 就是使得排版变得轻松并且兼顾了浏览器兼容问题的解决方案。试想如果没有 margin 和 padding，恐怕我们还要和表格定位的网页作斗争吧？

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles – top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

N.Design Studio 又一力作，近乎完美的将 MAC 的 Dock 栏搬到了网页上。使用的是纯 CSS 和 JS 技术，不含防腐剂，味道还很好吃。

看看在线Demo，然后研究一下如何将这个东东放在自己的网页上。

据作者测试，这个东东兼容 IE 6, IE 7, Opera 9, Firefox 2, and Safari 2, 可惜，在 Safari 1 上有点小问题。