记得在初期的时候，工作中时不时都要去查一查CSS手册，后来慢慢地经验多了也就基本上不用查手册了。但是为了向WEB标准靠拢，近来都比较常用到HMTL手册。不管怎么说，这两本手册也应该是一个WEB前端人员必备的吧。CSS手册之前发过，这里把HMTL的发上来吧。
关于display:inline-block，手册上是这样解释的：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内。这个属性算是有点冷门吧，也许有些朋友平时也不怎么会用到这个属性。不过在某些情况下给一些内联元素用display:inline-block，比如说a标签或span标签，会省不少工夫，比如说之前发的一个滑动门效果就是这样用的。
不过在这里又发现了一个问题，在块级元素上这个属性无效，比如说加在DIV上但此DIV还会是行布局。其实在这里也只是想深入研究一下而已，在实际项目中完全可以用别的方法避免这个问题的产生。所以也查阅了不少资料，其实内联元素也并非是真正支持display:inline-block，只是因此触发了hasLayout属性，而使其拥有了display:inline-block 的特性。而应用到块元素上时，同样也只是被触发了hasLayout属性，所以还是分行布局。而关于hasLayout，可能有很多朋友会觉得陌生，大家可以参阅一下这篇文章《On having layout》，原文件的链接好像有点问题，我这里链的是蓝色理想上的一篇转载。
接下来就应该说说如何解决这个问题了，有两种方法。
1、先定义display:inline-block ，再定义display:inline，不过要分开定义才有效，这好像是IE的一个BUG。
1 2 | div {display:inline-block;...} div {display:inline;} |
2、直接定义display:inline，然后再触发块级元素的hasLayout，如何触发在之前提到的那篇文章有详细说明。
1 | div {display:inline; zoom:1;...} |
其实CSS滑动门这个概念早在几年前就已经出现了，只是近来年被提得比较多而已。但是常常有人把它跟选项卡效果混淆在一起，特别是一些新手朋友，所以我在这里写篇详解，希望能有所帮助。
说起来滑动门也不是什么高深的技术，也只是CSS的一种手法罢了。它是利用背景图像的交迭以及相互滑动来实现一些效果。最常见的就是圆角的导航了，我们可以把一左一右两个圆角背景想像成两扇可以滑动的门，他们可以滑到一起并交迭以显示较少的内容，也可以相互滑开以显示较多的内容，就如下图所示：
在以往的一些教程中，都喜欢把背景图切成一宽一窄两部分进行拼接，其实一张图就足矣。
在这里，我们只用了<a>跟<span>两个标签，样式可以定义三种状态，可以说是最简单的一种方式了。此为本民工原创，如有雷同纯属巧合，转载请注明出处。
提示：你可以先修改部分代码再运行。
YSlow 是Yahoo开发者团队发布的一款基于Firebug的插件。Yshow=why slow?是用于用于分析网页，并根据一些高性能网站的规则进行相应的评级打分，对于网页性能优化有很好的帮助作用，告诉你那些部分影响了你的网页速度。
今天用Yslow评了一下我前不久做的一个站的页面，结果是73分。
这里一共有13条主要规则，而想要满足这13条规则达到网站速度的最佳优化，并不是一个WEB前端技术员能独立完成的。其中第2、3、4及13条，需要网络服务器相关的技术来解决，这也是我这页面评分不高的原因了。下面具体来说明一下这13条规则：
1、Make fewer HTTP requests–更少的http请求，也就是说页面中尽量少的引用外部静态资源，js、css以及图片。
80%的用户响应时间都是浪费在前端。而这些时间主要又是因为下载图片、样式表、JavaScript脚本、flash等文件造成的。减少这些资源文件的Request请求数将是提高网页显示效率的重点。要做到这一点有很多方法，比如使用CSS Sprites整合图片、合并CSS文件（不需要划分为什么色彩样式、布局样式、文字样式之类的）、合并JS文件。
2、Use a CDN–使用CDN网络，将页面中的静态资源分布到离用户最近的网络节点上。
这是有关服务器线路的问题，我也不是太了解，放在国内的话大体上也就是电信、网通、双线、多线的意思了。
3、Add an Expires header–为静态资源文件增加过期时间，让用户通过本地缓存来更快的访问网站。
设置静态文件的过期时间，最开始的时候我找了好久也没找到这个过期时间要怎么加，原来这个也不属于前端人员的范畴，找服务器管理人员去了解下吧。
4、Gzip components–压缩静态资源内容，减少网络传输时间。
这个应该很熟悉了，Gzip的思想就是把文件先在服务器端进行压缩，然后再传输，在客户端再进行解压。对于当前的PC机配置来说，这点点的解压工程实在是微乎其微。不过跟上一条一样，也是属于服务器管理人员的范畴了。
5、Put CSS at the top–将CSS放在页面头部，能够更快渲染页面。
这个很容易理解，而且绝大部分人也都会这么做的。无论是HTML还是XHTML还是CSS都是解释型的语言，而非编译型的。所以CSS到上方的话，那么浏览器解析结构的时候，就已经可以对页面进行渲染。
6、Put JS at the bottom–将JS放在页面底部，一般情况下JS的下载是阻塞模式的，放在页面顶部会阻塞其他资源的下载。
跟上一条一样，很多人都习惯了把JS也放在头部，这样不仅会阻塞其它资源的下载，而且JS一般都是用来交互的，如果页面都还没有出来，何来的交互呢？所以JS还是要放到底部加载。
7、Avoid CSS expressions–不要使用CSS表达式，因为CSS表达式需要很多资源，有时甚至会造成页面假死。
expressions其实就像是其它语言中的if……else……可以在CSS中进行逻辑判断，但是这样的代价是非常大的，曾经我为了满足IE6下的图片大小自适应用了这么个语句，结果页面慢如蜗牛。
8、Make JS and CSS external–将CSS和JS使用外部的独立文件。
看起来跟第1条有点矛盾，不过这应该看具体情况了。javascript和css都有缓存，独立成外部文件的话，有利于提高用户再次访问时的效率。而某些大站比如yahoo，会把CSS及JS都写在页面里，那是因为访问量太大，尽可能的减少请求数。如果你的网站访问量还不是那么地惊人的话，还是独立出来比较好。
9、Reduce DNS lookups–减少DNS查找。
这一点虽然也是服务器方面的问题，不过还是很好理解。也就是说不要把同一个网站的内容分散在不同的服务器上。比如说，一个图片站，因为空间大小的关系把某一部分图片放在了另一个服务器上，那么这一部分的图片在浏览的时候就会慢很多。
10、Minify JS–最小化压缩JS，减少JavaScript和CSS文件的体积。
这个应该见得多了，我们应该经常会见到被压成一行的JS以及CSS文件，压缩工具在网上随处都可见。
11、Avoid redirects–避免无意义的跳转。
这里有一种现象常常会被开发者所忽略，这种现象发生在当URL本该有斜杠（/）却被忽略掉时，这时候会返回一个301的状态码，然后浏览器重新发起一次请求，这其中就浪费掉了时间。
12、Remove duplicate scripts–去除重复的脚本，不光是文件，甚至是同功能的函数。
这个道理很浅显，我想也不用说明太多了。
13、Configure ETags–配置实体标签。
Etag（Entity tags ）实体标签。这个tag和你在网上经常看到的标签云那种tag有点区别。这个Etag不是给用户用的，而是给浏览器缓存用的。Etag是服务器告诉浏览器缓存，缓存中的内容是否已经发生变化的一种机制。通过Etag，浏览器就可以知道现在的缓存中的内容是不是最新的，需不需要重新从服务器上重新下载。这也是服务器人员的工作范畴，有兴趣的可以了解下。
后记，其实写这文章之前，有很多概念都是模模糊糊的，所以也查阅了很多资料。不过现在都清晰啦，这也是一种不错的学习方法呢。
这是从一个老外的站上找到的，不过我现在都忘记那网址了。
写得很不错，不仅算法值得研究，而且整个架构以及OOP思想都很值学习。调用方法也都做好了，可以很方便地用在任何你想用到的地方。之前我的那个MP3播放器里用的就是其中的一个效果。
点击左键可切换效果。
