飞鱼 ^_^ 浆抱罗斯‘s blog

最近接触了许多 关于图片文字水平对齐的需求，然后发现如果单单将vertical-align 设置为middle 的话，不同浏览器下居中对齐的位置有偏移，让人好不蛋疼~ =，=
网上搜了下好像也没有搜到相关的分析，大部分都是垂直居中的案例
于是专门针对vertical-align 做了次分析，功夫不负有心人，分析结果还是挺好玩的，对vertical-align 又有了一次深入的了解。给力~~~

demo 传送门： vertical-align 各属性分析 有错误欢迎回复纠正哦 ^__^

一些心得体会：

vertical-align 定义

最初我认为的vertical-align 解释 跟text-align 一样，是容器内部的非block 元素居中对齐，但~~ 我理解错了
从w3c 官方对 vertical-align 各属性的解释来看，vertical-align 是定义当前节点，跟外围内容的对齐方式，跟text-align 的解释是不一样的。

vertical-align:baseline 基线对齐

分析所得，发现baseline不是在中文字的可见部分最下方，而是在英文字的可见部分最下方。
然后发现图片对齐的时候是以图片的最下方同相邻文字的 baseline 对齐。一直觉得为啥图片下方会有4像素的空白，现在明白了

不同字体会有不同效果

我这个demo 用的Tahoma 字体，发现如果使用类似 Yahei 等中文字体，在IE低版本下会有出现一些奇怪的现象，详细可以看demo。

vertical-align 最好不要混用

从定义来理解，就发现这个vertical-align 最好不要混用。因为本身不同属性会产生各种各样的兼容问题，如果混用，估计会出现更复杂的现象。虽然我也没有深入研究，但我觉得混用不太靠谱。

vertical-align: px 定位最稳定

这个属性一直都没怎么用，原先一直用middle 来实现水平对齐，在一次偶尔的项目代码里发现的。
相对定位是相对于baseline的偏差定位，负值代表图片相对baseline往下移。
在研究中发现使用相对定位兼容性最好，只有IE7会有2px的偏差，但基本可以无视，因为目前IE7的用户可以忽略不计。
不过这种方法也不是万能的，
因为是相对于baseline的相对定位，如果文字变大后，图片的对齐位置 看起来就不会跟着移动区别于middle属性，不过个人觉得这样的情况出现概率不大，并且字大了再针对调整也没问题。
另外图片大小不一样大相应的负值也不相同，详细见demo。

高潮：vertical-align 最佳兼容方案

前面说了这次研究没有白费，个人推荐的vertical-align 用法如下：
1. 尽量保持主内容的 vertical-align 是baseline 即默认的，不要把vertical-align 当text-align 来理解使用。
2. 针对 内部需要调整位置的 图片等 进行 px 定位。
优点：保证外围的vertical-align 是默认值，不产生混用现象。
缺点：针对不同尺寸的图片要针对进行定位，不过一般ico 大小差不多大，可以统一调整。

下一步研究方向：表单元素的vertical-align: px 是否同样适用 ？

<p><img src="http://qilei.org/wp-content/uploads/2011/08/20110814-html5.jpg" alt="" title="html5" width="600" height="240" class="alignnone size-full wp-image-1291" /><br /> html5已经出来有一段时间了，虽然万恶的IE面对其赤果果的色诱也硬不起来，但还是有很多优秀的网站开始应用了，毕竟大势所趋嘎嘎。<br /> 最近在啃<a href="http://book.douban.com/subject/4143105/" title="英文版" target="_blank">html5动物书</a>，虽然动物书讲的好多东西，在网络上的一些杂文里都看到过，不过毕竟是动物书，会有一些小细节是值得去翻阅的。</p> <p>好了 切入主题，讲讲心得：</p> <h3>section 是有语义的div </h3> <p>很多人很费解 为什么html5 放着div 那么短小精干的东西不用，非要用section呢？<br /> 我的理解是div 依然有用，只是它可以代表无语义的东西。section像是一个沙盒子，将不同的部分，区块，模块，区分开。</p> <h3>header 不是一定要唯一</h3> <p>首先要说的就是这个header标签，之前看了好多关于html5的杂文，给人的感觉就像是 header 标签是 网站头部进化过来的，其实不然，就像以前很多人认为 h1只允许有一个一样。<br /> 因为 <strong>header 可以包含在 article 里作为 文章的头部标签</strong>。见(49页)</p> <h3>hgroup 在header 标签中充当目录指引作用</h3> <p>原先一直很不明白hgroup 的作用，因为w3cschool 上表现的例子中hgroup中都是些h* 标签集合，这种东西在实际应用中的应用场景非常狭隘。但当发现 article 里可以丢header 标签后 这个问题就解决了。<br /> 其实个人觉得这个标签的重心在目录指引，在内容为王的时代，hgroup标签会给seo带来一定贡献。</p> <h3>有了沙箱后，网站结构变得不是那么虎头蛇尾 </h3> <p>很多人认为 一个web 中 只能用一个h1 不能用太多 h2，以及少量h3， 甚至都找不到 h4的踪迹。<br /> 事实告诉我们，我们甚至可以在 nav 标签中使用h1。<br /> 那么这样写不但不会混淆seo 抓重点。而且能让web 看着更加婀娜多姿，凹凸有致。</p> <p><em>顺便普及一下html5 标志中的一些寓意以及新特性</em>：<a href="http://www.elviscai.com/view/html5-logo-released/" target="_blank">HTML5标志</a></p>

<p><img src="http://qilei.org/wp-content/uploads/2011/06/position.png" alt="" title="position" width="600" height="240" class="alignnone size-full wp-image-1260" /><br /> 发现 最近 可以吐槽的东西越来越少 =，= 大概是工作有些忙了~ blog 都杂草丛生了 = =</p> <p><em>技术文，看不懂可以提问哇，实在看不懂就挑好玩的看^__^ 很湿~</em><br /> 此文章堆在后台好久了，一直都没找到配图，思路也没理清楚，于是都快臭了~</p> <p>好吧进入正文~~<br /> =========================华丽的吐槽线======================<br /> 可能是个人习惯吧，我个人在写css 样式的时候 position:relative 都很少用。不到逼不得已不用，因为这东西在面对IE大叔的时候总是会各种被推到，比如多个positon 嵌套的的时候 会产生 类似 z-index 优先级的失控，不知道其他coder们碰到过这个问题没？反正我是碰到不下1次了。</p> <p>举个栗子如下：html 代码 <em>节略写法，你懂的</em> <a href="http://qilei.org/201106/thinking-about-position-relative-on-ie/#more-1223" class="more-link">阅读全部>></a></p>

<p><img src="http://qilei.org/wp-content/uploads/2011/05/201105-bb.jpg" alt="" title="201105-bb" width="600" height="240" class="alignnone size-full wp-image-1245" /></p> <h3>5月份的杭州区w3c标准化交流会</h3> <p>带着感冒 去了口碑做了次分享，分享的内容是最近刚接触到的并且用的比较爽快的《闭包式js架构》<br /> <em>顺便吐槽一下，这次来的人不多，不知道是不是不太好意思来交流还是怎么了，是不屑么~？，就当交朋友么~ 其实我也很菜的，听了就知道。</em></p> <p>以下是我最近在做新系统的时候用到的一种 闭包式js架构 书写方法，大家慢慢看，有些地方似曾相识，说不定有你想要的东西，仅仅是分享，也许又更好的实现方法。</p> <h3>1. 说说闭包</h3> <p>因为这样的架构思想又一些类似 javascript 的闭包概念。所以我在分享的时候做了下闭包的引导。<br /> 分享前做PPT的时候特意去百度娘那里看了下关于闭包的知识补习一下。<a href="http://baike.baidu.com/view/648413.htm" target="_blank" rel="help">百科</a><br /> 分享的时候因为主要讲的不是闭包所以顺便带过一下，不过会后，似乎有人反而对闭包感兴趣，嘎嘎。真是指哪哪不响哇。</p> <p>回来又抽空查了下 《javascript 高级程序设计》中的闭包解释，似乎比百度娘上面的更浅显一些，百科上的是一种比较极端的闭包，(<em>有空朋友可以翻阅一下：p56</em>)。 最简单的闭包 就是全局变量。</p> <h3>2. 利用匿名函数解决$冲突</h3> <p>很多朋友应该会碰到过 一个老系统页面里好多js库的情况吧。神嘛 prototype jQuery mootools 会时不时暂用$符号，导致各种冲突。<br /> 记得jquery 有个方法是把$让出来。<br /> 这里给出一个比较好用的匿名函数 来形成 封闭作用域来实现。 <em>很多jquery 插件就是这样来书写的</em></p> <pre><code>(function($){ /*** * make $ in Closed Scope */ $(function(){ //do something on dom ready }); })(jQuery); </code></pre> <p>利用匿名函数把，jQuery 引入匿名函数，这样在匿名函数的作用域里，你就可以自由的使用$了，并且这样也同样试用与其他库。</p> <h3>3. 怎样不污染命名空间</h3> <p> <a href="http://qilei.org/201105/the-closure-alike-javascript-platform/#more-1238" class="more-link">阅读全部>></a></p>

<p><img class="alignnone size-full wp-image-1154" title="20110228" src="http://qilei.org/wp-content/uploads/2011/03/20110228.jpg" alt="" width="600" height="240" /><br /> <em>飞鱼：等交流会洗照片中………^__^</em><br /> 掐指一算 发现又有一个多月没更新blog 了，我勒个去~~ = =<br /> 已经是第三次参加 web标准化交流会了，每次都还是有点收获的，更何况每次都是在不同公司感受不同的氛围。</p> <p>本次交流会在 杭州东软的思科会议室里举行，依然由 <strong>蕃茄</strong> 主持会议，这家伙每次闲话都很多嘎嘎，是一个对web 情有独钟的淫啊。</p> <p>闲话少说：大概 跟大伙回报一下 这次交流会的内容以及心得吧。</p> <h3>一、div section article 傻傻分不清楚 – by 蕃茄</h3> <p>蕃茄大概介绍了一下html5 的一些标签，引导大伙去讨论。分享了下自己对新增标签的理解。<br /> 不过似乎是思科太高档了，（会议室里大大的会议桌，水果···）大家显得比较拘谨，可能是杭州人都比较含蓄。也可能是 前端淫类 都比较 闷骚~~~ Orz</p> <p><em>说到对标签的理解，正如我在交流会上说的</em><br /> html5 新增的标签 如 header footer nav aside article section 等。新增的标签让原先赤裸裸的div 变得更加语义化。<br /> 那么更加语义化对web 有什么好处呢。<br /> 我自己总结了一下几点：<br /> 1. <strong>页面结构更加清晰</strong> 。从标签的语义就可以看出 section 的中文意思是 地区，章节。让用户的体验是，预览网页更像是在看一本书(<a rel="bookmark" href="http://diveintohtml5.org/">国外的例子</a> <em>页面看起来就像一本书</em>)，一本书有页眉页脚(header footer) ， 目录(nav) ，旁注(aside) ，章节(section)，正文(article)，区块(section) (article 是特殊的section) 蕃茄写的文章里有说明(<a href="http://www.qianduan.net/html5-differences-in-the-div-section-article.html">HTML5 中 div section article 的区别</a>)。</p> <p>2. <strong>让爬虫更懂你要传递的内容</strong> 。在搜索引擎如此发达的未来，语义化web 能让web 说要传递的信息更加 清晰。比如爬虫可以有选择性的 抓取 正文以外的内容。让爬虫(在你的网站上)多飞一会儿，那么呈现给用户的就越多越快。</p> <p>3. <strong>让前端代码更加对象化，模块化</strong> 。这个思想也是最近在接触很多后端语言，接触手持设备开发语言(android and iOS) 越发期待的。就是期待未来的web 页面制作应该像 xcode 那样制作前端界面的时候 根本不需要敲任何html5代码，(<em>虽然类似Dreamweaver 也能做到，但不是最优化</em>)。那么假如web标准化 慢慢成熟之后 是否直接可以 建立一套类似 那样的界面。<br /> 那么我们前端的工作就不再是：</p> <ul> <li>a. 觉得 section 标签比 div 长 (<em>交流会上有人提出这样的疑惑，这个不是问题，因为有自动补全工具</em>); </li> <li>b. article 标签里是否可以嵌套 section (这个是我突然对这两个标签是否可以交叉嵌套的疑惑).</li> <li>c. 检查标签是否闭合，(前端的很多bug 都是标签 误删没有闭合造成的, 当然html5 你可以不闭合，但必须遵循它的标准)。</li> </ul> <p>以上就是我对前端工作的未来的设想。<br /> 当然前端的工作还有 javascript 部分，这块东西就像玉伯说的，水很深，我们还在河沿。</p> <h3>二、canvas 应用开发, 真3d引擎 – by 周杰 hehe123 思科网讯</h3> <p>第二部分有些高端，因为涉及到图形算法。听得好多在场的前端大大们 一愣一愣，因为之前做过flash 对空间算法 还是有点接触，所以听起来不是非常累。<br /> 之前我也写过一篇关于 javascript 3d 的介绍 –<a href="http://qilei.org/200902/javascrip-for-3d-program/">强悍的javascript — 3D效果</a>。<br /> canvas 是个怨念物。想掌握这个东西，还需要有一定的 图形算法能力。<br /> 周杰给我介绍了下 web中的真3d 开发。我一直以为web上只能做做伪3d呢，不过就目前来讲，真3d 在性能上 跟伪3d 还有有挺大差距的，真3d相当耗资源。可能是研究得还不够深入吧。也许未来的 web 版山口山离我们不远了。<br /> 具体 还是 不深入讨论了，这方面真的好深。有空自己做点 canvas 的真3d 出来 show 一下。</p> <p>顺便放一个 canvas 的帅气应用 <a href="http://weavesilk.com/">http://weavesilk.com/</a><em>非常帅气，用cavas绘制类似极光一样的图，算法帝啊·~~ 膜拜</em></p> <h3>三、感慨： 我们走得还不够快</h3> <p>发现不同的公司对web开发的理念就是不一样，像商业为主的 网站 大多都是以 业务为导向，注重实用。觉得思科网讯这一点挺好，它们有个专门针对web的研发机制。以追求领先技术为导向，有点labs的感觉。</p> <p>相对于这点，不禁 膜拜 来自日本的那些前端大牛。就像 周杰说的当我们还在讨论 html5标准的时候，才开始学习html5的时候，他们就已经开始在研究canvas 的3d 引擎了。这样导致的后果是，我们永远都会在技术研发上落后于他们。<br /> <em>我就感叹一下~~~~ ^__^</em></p>