偶然去到了张鑫旭大神的博客，感觉里面都是前端干货，非常值得去学习。
当然了，此大神09年毕业于华中科技大学，目前在ISUX上海设计中心，能不厉害吗？
为了不浪费你的时间，建议直接去原链接阅读，肯定收获多多。转自zhangxinxu博客:http://www.zhangxinxu.com/wordpress/?p=5264
请勿再往下看了，在此仅仅记录一下而已。
开始讲解line-height，以前的字体对齐都用的line-height,但是要让文字占据高度为20像素，那么行高是多少呢？
body {
line-height: 1.42858;
font-size: 14px;
}
在CSS中，行高计算的时候，一定不要向下四舍五入，而要向上。类似上面的代码，虽然14*1.42857近乎就是20像素，但是，不好意思，最后还是以19像素的高度呈现，在Chrome浏览器下就是如此！
这样就有了一个20像素为基准的网页布局环境了，为什么要用20像素布局呢？
目前而言，绝大多数网站还是处于12像素字体时代，设计师设计的图标都是按照16*16像素规格设计的偏多；不太专业的设计师可能会14~20像素之间摇摆。
反正不管怎样，最后（加上sprite工具盛行）我们图形在网页中的尺寸基本上就是16px*16px。
1. 与后面文字的对齐
由于vertical-align属性的兼容性，以及vertical-align:middle并不是严格意义的垂直居中，因此，小图标+文字的对齐，基本上都要针对不同浏览器加个hack补丁；在加上，如果你的图标尺寸一会儿16像素，一会儿18像素，显然，没法通过全局一个设置使得整站的小图标和文字都对齐良好！
2. 点击区域大小
有时候，我们的小图标直接就是点击按钮，此时，如果你的尺寸就是16像素*16像素，会不会点不准的概率就上升了，如果图标是20px*20px呢？
3. 重复冗余的CSS代码
当下类似grunt-spritesmith的小图标合并工具基本成了前端团队的标配，而根据我的观察，基本上，大家都是设计师给的图标直接扔到文件夹里面进行合并，于是，产出的代码基本上就是width/height/background-position的模式，然而，可能里面70%宽高都是16像素，20%是18像素，还有10%是其他小尺寸，也就是，其实很多CSS代码是可以合并的，然而，都浪费了。
但是如果所有图标统一按照20px*20px的标准处理，那么网页文字基础高度是20像素，图标也是20像素高，天然对齐，问题1解决；20*20的点击区域对吧，显然比16*16要大，问题2解决；所有图标都是20*20的尺寸范围内，所有width/height都可以合并，大大减少CSS代码，问题3也搞定了！是不是很赞哈。
然而，实际上的处理要比上面说的复杂和深奥的多！
图标和文字天然对齐
按照我们直观的认知，两个元素都是20像素高，都在自己的垂直范围内居中，那这两个元素应该是在一个水平线上的。实际上真的是这样吗？是的，但是，注意这里的但是，是有条件限制的！
如果inline-block水平元素’overflow’不是’visible’，或者里面没有内联元素（图片、文字之类），则整个元素的基线就是自身的下边缘；否则，基线就是里面最后一行图文元素的基线
有点不太理解？没关系，不是本文的重点。你只要知道，我们要想20像素高的图标和20像素高的文字天然对齐显示，需要满足这两个条件：
1、 overflow属性值除了visible都不行；
2、 里面需要有不加修饰的文本内容；
因此，要想实现小图标天然对齐，我们不能有overflow:hidden同时HTML标签内部有文本内容，张大神给出了方案。
.icon {
display: inline-block;
width:20px; height:20px;
background: ...;
white-space:nowrap;
letter-spacing: -1em;
text-indent: -99em;
color: transparent;
/* IE7 */
*text-indent: 0;
*zoom: expression( this.runtimeStyle[’zoom’] = ’1’, this.innerHTML = ’3000’);
}
.icon:before {
/* 伪元素插入空格文本 */
content: ’3000’;
}
可以有CSS代码段满足各种场景的对齐效果的。无论是空标签HTML，还是内置可访问性提示文字的HTML，都是对齐效果棒棒哒！
而且，就算文字的字号大小变化，例如14px→16px图标和文字也是对齐良好的，因为，对齐的本质是图标元素里面的文字和后面的文字对齐，文字和文字对齐，自然是天然对齐的，千古难题就这么有了解决方案，以前的CSS hack啊，什么vertical-align控制，还有margin负值偏移都是浮云了。
20像素的基准行高要在体系中才能大放异彩，而这个体系的另一个非常重要的成员就是页面的基本UI组件们！
所有的按钮均是40像素高度，所有的输入框都是40像素高度，所有的下拉框、时间选择框都是40像素高度；
由于我们的基准文字高度是20像素，因此，左边文字距离顶部的间距，就是标准的10像素！
这就使得我们网页中无论是大模块之间的间距，还是小的文字和空间之间的间距；无论是水平的间距还是垂直的间距，全部都是标准的5像素的倍数。从而让我们所有的大小模块的实际高度都是10的倍数(padding-top + line-height*行数 + padding-bottom)。
换句话说，我们以20像素为基准进行布局和UI组件设计，使得我们的网页间距标准化了，无形之中会让我们页面的排版更专业，同时也让zxx.lib.css的利用率提升了。
看似是简单的要求以20像素为基准，实际上根植于体系中并有一套完整的解决方案。
不过，跳出内容本身，换个角度讲，本文的内容其实挺无聊的。
人家淘宝天猫就是基础高度18像素，不是这里推荐的20像素，但照样年销售额3万亿，照样上市，照样造就了一大批土豪。
所以，大家大可不必过分在意一点点的CSS细节，CSS对于产品的商业价值有，但是到了一定阶段以后，实际上就有限，或者说很难直观的体现，或者说性价比就不高了。今天还有小伙伴问我，absolute绝对定位元素display:none和visiibility:hidden两个隐藏的渲染性能差异，这个问题的商业价值比本文内容还要小1万倍，以现在浏览器的渲染性能以及我们实际的开发需求，就算有差异，有价值吗，肯定没有！
大环境如此浮躁，你会发现，自己遇到的困境并不是技术成长遇到了瓶颈，而是根据不需要你这方面进一步的技术成长，来，干点收益更明显的事情！
我想，很多前辈技术博客断掉了，怕也是人在职场，身不由己！
能不能走出一条不一样的路呢？
