最近关于页面建构的一些想法...
最近一段时间因为工作强度比较大，而我也正是那种往往在高强度和压力状态下才会冒出ideal的屌丝，因此最近在页面建构方面的收获也颇丰，现在作为笔记记下来。
（1）关于构造雪碧图的一点点经验
以前最害怕的就是拼雪碧图了，特别是有hover状态的，因为一个像素的差别都会导致，当鼠标hover上去的时候图片会发生跳动。恰好这次页面上有巨多的hover状态，看见就郁闷了。也许真的是时间太紧了，如果按照以前的那种拼图的方法，在一天之内根本是完不成的任务的，穷则思变，自己想了一套拼雪碧图的方法，使用了一下还比较靠谱，现在就将它记下来。
a)在雪碧图之前，我们需要一个适合大小的画布（canvas），在Ps下面的命令是Ctrl+N,画布的大小最好是10的整数倍，至于原因后面会用上
b)创建好画布后，下面的就是规划画布，因为在使用background-position时颇有差之毫厘失之千里的感觉，所以画布一定要好好规划，在规划画布的时候还要联系页面元素的大小，如果页面最小的
图标都是20px * 20px的，那么此时你的画布每个单位的大小就不应该小于20px * 20px. 在这一步中需要用到ＰＳ中的一个Grid的东西，快捷键是Ctrl + '(Enter 键左边的那个键)，当弹出grid的时候
可能不符合你标准这时需要更改每个grid的大小，单击“编辑——首选项——参考线、网格和切片”，在右边找到“网格”，可以设置网格线间隔、颜色、样式等。
c)当规划好画布后，下面的事就比较简单了，找到参考线，好好的进行排图，将相关的图尽量放在一起，并且是按照单元格来放。
这样第一个图和第二个图当hover状态就不会出现偏差了。
总结：使用上述方法的好处就是在用background-position定位的时候比较容易，并且都是整数值。还有一个需要注意都是在拼完后一定要保存好psd，因为这些图很有可能在后面的工程中会发生变化，为了
不造成重拼和图片的浪费，直接调整原图是比较靠谱的。
（2）关于text-align的用法的探讨
下面是一个demo的地址http://jsfiddle.net/xiaoxiong_1990/9VMTC/ 在这个demo中可以看见下面的文字并没有按照我们预想的那样进行居中，但是有一个怪异的现象的是，当你F12，通过控制台工具选中这个a元素的时候，这个时候文字就会发生奇异的现象，它竟然居中了，这一点是我始终没有想通的一个问题。但是普通用户来看文字没有居中，这就是一个问题。从出现的现象来看应该是text-align属性出了问题。
在CSS2的规范中看见了有两处讲到了关于text-align这个属性：
- 在http://www.w3.org/TR/CSS2/visuren.html#inline-formatting ，在这里提到，当一个inline-level 的box它的宽度小于包含它的 行框的宽度的时候，他们在水平方向上的位置就有text-align属性决定。
- 另一个就是在http://www.w3.org/TR/CSS2/text.html#propdef-text-align ，在这部分，更加明确的说text-align属性是描述在block container 中一个inline-level box是怎样被对齐的。
- 还有一个关于text-align的参考就是来自MDN上面的描述https://developer.mozilla.org/en-US/docs/CSS/text-align。
通过三者的综合以及根据http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width对a里面，方位值的计算，我们不难得到为何当span的display：absolute时文字没有居中。
a)因为a的text-align为center，所以a里面的inline-block是从中部开始定位的，根据http://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width中的如果'left','width','right'都为auto,的话，根据direction首先确定span的left值，这里的left值真好是50px,然后是根据规则span的宽度值是根据shrink算法得到。这样也就解释了为什么span是右边界对齐a的中间部分。
b)修正：其实关于这个问题有很多的实现方式，最简单的就是将span的position改为releative,这样关于span的left,width等值的计算将会按照http://www.w3.org/TR/CSS2/visudet.html#inline-width，这个来计算，这样span的left,right计算后的值就为0.然后span是a里面的inlline-level 的box,这时span的开始位置就是a的中间位置。
