1.一切从行高开始
想想看，当你用 CSS 创建页面时，默认的字体大小和行高是多少？
以下是我的一些统计数据：
我想大部分朋友应该都没有关注过这方面的细节。 基本的列宽大致就可以了。 取1.5是为了方便估算，1.75实际上是无害的。
现在的网页已经告别了以前只能浏览信息的状态。 页面的结构越来越复杂，只有少数情况下有大的描述文本。 所以行高的作用已经从阅读体验的高低变成了更方便的估计或者什么其他的作用。
这里看似不起眼的一句“还有什么角色”，其实才是本文的主角。 在本文中，行高兼作网页垂直网格的基准！
我勒个去？
我们可能听说过网页网格布局，说实话，我对水平网格完全没有兴趣，而且我从来没有介绍过几百篇CSS文章，因为它与我的布局理念不符； 不过，明天我会提到垂直格栅！
页面的内容通常以自上而下的瀑布样式呈现。 内容千变万化，元素的高度也难以预测。 因此，对于垂直方向来说，所谓的屏障几乎是无稽之谈。 确实如此，但部分格栅有时会让我们的页面看起来更加规范，让我们的工作更加轻松。
而这一切都始于列宽。 以前我们写页面的时候，我们通过设置字体大小和栏宽值来确定单行文字的高度； 但在这里，我们反过来思考，我们希望页面上基本文字的高度是20像素，那么我们的栏目宽度应该是多少呢？
现在是大屏幕时代，假设我们默认的字体大小是14像素，我们估计：20/14≈1.4285714285714286，四舍五入的结果，所以我们得到：
身体 {
行高：1.42857；
字体大小：14px；
对不起，但我要教你一个技巧。 注意，在CSS中，估计高度时，一定不能向上取整，而应该向下取整。 与之前的代码类似，虽然14*1.42857已经快20像素了，但是，抱歉，它仍然以19像素的高度渲染，这就是Chrome浏览器下的情况！
因此，实际设置应该是：
身体 {
行高：1.42858；
字体大小：14px；
这样我们就得到了一个基于20像素的网页布局环境。 这时候普通一行文字的高度就是20像素，那么有什么好处呢？
从单个角度来看，虽然20像素和21像素的高度单位没有什么区别，但如果放在一个完整的系统上，价值就可以很好的展现出来！
2、基于20像素的20*20像素的小图标策略
基本上每个网站都离不开小图标。 国际化的图形语言对于一个网站来说是不可或缺的，无论是在体验上还是在识别度上。
目前绝大多数网站还处于12像素字体时代，设计师设计的图标大多是基于16*16像素的尺寸； 不太专业的设计师可能会使用14-20像素的摆动。
不管怎样，最终（随着精灵工具的兴起）我们网页上图形的规格基本都是16px*16px：
.icon-hi {
显示：内联块；
宽度：16 像素；高度：16 像素；
当然，17px*18px也很常见：
.icon-hi {
显示：内联块；
宽度：17 像素；高度：18 像素；
这种为小图标创建具有真实规范的 CSS 代码的形式存在三个主要问题：
与前面的文本对齐
点击区域大小
重复的冗余 CSS 代码
1. 与前文对齐
由于vertical-align属性的兼容性，而vertical-align:middle并不是严格的垂直居中，因此小图标+文字的对齐基本上需要针对不同浏览器打hack补丁； 另外，如果您的图标大小有时是 16 像素，有时是 18 像素。 显然，没有办法通过一种全局设置使整个网站的小图标和文本很好地对齐！
比如腾讯微博这里，图标是16像素大小，然后进行一些各种处理：
很多补丁，很多CSS处理，里面的图标使用绝对定位，这是处理兼容性的好方法，但显然并不普遍适用。
2. 单击区域大小
有时，我们的小图标是直接点击按钮。 这时候如果你的尺寸是16像素*16像素，点不准的概率会增加吗？ 如果图标是20px*20px呢？
3.重复冗余CSS代码
目前类似grunt-spritesmith的小图标合并工具基本已经成为后端团队的标配，而且据我观察基本上大家都是设计师给的图标直接扔到文件夹上进行合并，所以输出的代码基本上是 width/height/background-position 的模式。 不过，上面的宽高可能70%是16像素，20%是18像素，还有10%是其他小规格，也就是说其实有很多CSS代码可以合并，但是浪费了。
生成的less代码截图如下（来自真实项目）：
上述问题其实可以用一种解决方案来解决，那就是所有图标统一按照20px*20px的标准进行处理！
想一想，我们网页文字的基本高度是20像素，图标也是20像素高，自然对齐，问题1就解决了； 20*20的点击区域明显比16*16大，问题2解决； 所有图标都在20*20的规格范围内，并且所有宽/高都可以组合，大大减少了CSS代码，问题3也解决了！
CSS生成的模板如下图所示：
————低调的分隔线————
然而实际的处理比上面说的要复杂和晦涩得多！
图标和文本自然对齐
根据我们的直观认知css 顶部对齐，两个元素的高度都是20像素，并且在各自的垂直范围内居中，因此这两个元素应该在同一条水平线上。 事实真的如此吗？ 是的，但是，注意这里，还有条件！
在《CSS深入理解vertical-align与line-height的关系》一文中，已经提到过：
'inline-block' 的基线是其在正常流中最后一个行框的基线，除非它没有流内行框或者其 'overflow' 属性具有除 'visible' 以外的计算值，在在这种情况下，基线是底部边距边缘。
中文音译为：
'inline-block'的基线是正常流程中最后一个行框的基线，除非该行框上方没有行框或者是'overflow'属性本身的估计值而不是'visible'，其中情况下基线是边距底部边缘。
翻译成白话就是：
如果inline-block水平元素‘overflow’不‘visible’，或者其上没有内联元素（图片、文本等），则整个元素的基线就是它的下边缘； 否则，基线是基线之上的最后一行图形元素（这就是我们需要的）。
我不太明白？ 没关系，这不是本文的重点。 只要你知道，如果我们想让高度为20像素的图标和高度为20像素的文字自然对齐显示，就需要满足这两个条件：
溢出属性值不仅是可见的；
其中必须有未修改的文字内容；
因此，以下两种情况排除！
。图标 {
显示：内联块；
宽度：20 像素；高度：20 像素；
背景：...
溢出：隐藏；
。图标{
显示：内联块；
宽度：20px； 高度：20px；
背景： ...
第一种情况是overflow:hidden被阻止； 第二种情况是标签顶部为空，基线仍然是元素的下边缘而不是上面的文本（如果有的话）。
因此，为了实现小图标的自然对齐，我们不能有overflow:hidden并且HTML标签内有文本内容。 我靠，有很多限制，看起来很烦人。 不过经过我自己的实践，是可以有CSS代码片段来满足各种需求的。 类场景的对齐效果如下：
。图标 {
显示：内联块；
宽度：20 像素；高度：20 像素；
背景：...;
空白：nowrap；
字母间距：-1em；
文本缩进：-99em；
颜色：透明；
/* IE7 */
*文本缩进：0；
*zoom:表达式(this.runtimeStyle['zoom']='1',this.innerHTML='3000');
.icon:之前{
/* 插入空白文本的伪元素 */
内容：'3000';
大家可以硬点这里：小图标文字对齐的终极解决方案demo()
这样一来，无论是空标签的HTML，还是带有外部辅助提示文字的HTML，对齐效果都很棒！
类=“图标”>
href="javascript:"class="icon">删除
而且，即使文字的字体大小发生变化，比如14px → 16px，图标和文字也能很好地对齐，因为对齐的本质是图标元素上的文字与前面的文字对齐，而文字则与前面的文字对齐。古往今来，文字都是自然对齐的，所以有一个解决这个困境的方法。 之前的CSS hack、vertical-align控制、负边距倾斜都是浮云！
Icon 20*20规格扩展grunt工具
设计师设计的图标均为16px~20px，CSS代码全部由Grunt工具生成。 我们很难简单地将所有图标的区域大小控制为20*20。 除非，我们在导入所有小图标时，手动将画布扩大到20px*20px。
亲爱的，今年是哪一年？ 这与艺术无关。 手工耕作的时代已经过去了，直接使用工具。
基于GM，我创建了一个Grunt工具，可以手动将20像素以下的小图标扩展为20像素的图像：
由于精力有限，这个小项目还没完成就被扔掉了。 正如您所看到的，我没有时间更改许多模板生成的文本。
Windows用户记得安装ImageMagick.exe，安装时记得检查全局变量等东西。
如果有什么问题，欢迎...别打扰我，忙，自己想办法吧，好吧~~
图标重心的像素级处理
对于某些图标，虽然设计者给出的规格是标准的，没有多余的像素，但图标本身的形状可能并不对称，尤其是上下对称。 当前面的文字呈现出来时，虽然真实的规格是对齐的，但视觉上的感觉却是不在同一行。 如果要求很高，可以请设计师或者UI工程师自行微调。 一般来说，1个像素就足够了。 当然是调整画面了。 例如，如果重心较低，则会添加高度低于1像素的透明区域。
3. 高度为40像素的UI组件系统
前面提到，20像素的基础列宽必须在系统中大放异彩，而这个系统的另一个非常重要的成员就是页面的基本UI组件！
所有按钮高40像素，所有输入框高40像素，所有下拉框和时间选择框高40像素；
上图摘自《基于原生HTML的UI组件开发》一文，展示了后端分离的例子：QQ公众平台UI组件下的后端分离演示
由于我们的基础文本高度是 20 像素，因此左侧文本从底部开始的宽度就是标准的 10 像素！
这使得我们的网页无论是大模块之间的宽度，还是小文字与空间之间的宽度； 无论是水平宽度还是垂直宽度，都是标准5像素的倍数。 这样我们所有尺寸模块的实际高度都是 10 的倍数（padding-top + line-height*rows + padding-bottom）。
也就是说，我们使用20像素作为布局和UI组件设计的基准，这使得我们的网页宽度标准化，这将使我们的页面排版更加专业，同时也将zxx.lib.css的利用率提高了。
如果我们进一步考虑按钮或者输入框的实现细节，你会发现CSS实现本身就是以20像素为基准的策略：
//zxx:擦，看代码，发现按钮是直接通过列宽来控制的。 我犯了一个错误，低估了敌人。 我回家后会调整。 这种情况，所以没有曝光。 更好的实现应该是与前面的输入框一行，列宽为20像素，并使用padding实现最终高度为40像素。
4。结论
看似简单的需求是以20像素为基础，但实际上是扎根于系统的，有一套完整的解决方案。
然而，跳出内容本身css 顶部对齐，从另一个角度来看，这篇文章的内容是相当无趣的。
人民天猫淘宝的基础高度是18像素，不是这里推荐的20像素，但它仍然有3万亿元的年销售额，仍然在上市，仍然造就了一大批土豪。
因此，你不需要太关心一点点CSS细节。 CSS对于产品来说是有商业价值的，但是到了一定阶段之后，其实是有限的，或者很难直观的展现出来，或者不划算。 今天有朋友问我绝对定位元素display:none和visibility:hidden的隐藏渲染性能差异。 即使我们的实际开发需求有差异，那有价值吗？ 当然不是！
在这样一个浮躁的环境下，你会发现，你遇到的困境并不是你遇到了技术增长的困境，而是你不需要这方面进一步的技术增长，来做一些利润更可观的事情吧！
我想很多专家技术博主都断绝了，恐怕也是在职场中无法自拔吧！
我可以走不同的路吗？
【今日微信公众号推荐↓】
