自从有了微信之后整个朋友圈就开始被一波又一波的信息洪流覆盖。各种秀恩爱虐狗，各种晒娃晒收入，各种炫富炫技，各种爱国微商，各种谣言八卦……哦还有各种“鸡汤”满天飞。我不知道你怎么看，反正我每天忙的一点看微信朋友圈的时间都没有。朋友之间联系常用的是QQ，工作之中用到最多的也是QQ，紧急事务要处理直接电话。除了接电话看时间之外手机都是锁屏状态。身边人天天刷朋友圈的人反而是自己的阿玛和额娘，很是奇怪的现象。
我觉得如果你是处于知识积累阶段的话，尽量少看点手机把时间多分配到学习看书练习上面会比较好一些。据说微信圈里面晒女友秀恩爱比较让人虐心，我觉得这没啥的，我们老祖宗说过的“福兮祸之所倚”。世界上永恒不变的就是变化。下一秒会发生什么，我们永远无法清晰的把握。
秀恩爱死的快
每次看到上面的图，总是会莫名的戳中我的笑点。很是欢乐！言归正传，在前几天的文章《vertical-align的简单介绍》的最后我提到了CSS中vertical-align和line-height有很是隐秘的关系。这种关系最直观的体现就是vertical-align的百分比值是根据line-height来进行计算的。通俗点来讲就是vertical-align:10%;line-height:20px;的时候vertical-align:2px。
要想深刻理解vertical-align和line-height的关系，必须先深入了解line-height属性。也许对于已经长期从事前端工作的你来说这个属性已经是滚瓜烂熟手到擒来了。稍安勿躁仔细的请看下去。
仔细考虑了下两者的关系如果要写的话看来还是需要新开一片文章了，前面单单关于深入了解line-height相关知识的字数已经有些超出最佳阅读区间了。
先来举个大家耳熟能详的例子，如果我们书写了一个<div></div>,这个时候它是没有高度的，就是height:0;。如果我们在标签内部敲入了一个空格(在编辑器中应该是转义字符空格)或者是一个任何形式的文字，那么这个标签就会得到一个高度。一点毛病都没有是吧？
随处可见的现象有时候最能说明本质，是什么导致的包裹元素在内部有文字之后高度就不再是零了呢？对于这种现象，我的老师当时给我解释的是“文字撑开了外面的元素，因为文字有高度。”。言外之意就是font-size造成的影响。说实话这个解释真的让我在相当长的一段时间内都保持了这种看法，直到后来我看到了一片腾讯ISD团队博客的文章《深入理解css 行高》之后我才明白这种理解是表象的、是错误的、是不全面的。其实导致这种现象出现的“罪魁祸首”是line-height属性。
举一个例子让这个罪魁祸首显形。
/* CSS */
.box{
border:thin solid #aaa;
background:#ddd;
}
.box-1{
font-size:24px;
line-height:0;
}
.box-2{
font-size:0;
line-height:24px;
}
/* html */
<div class="box box-1">font-size:24px;ling-height:0</div>
<div class="box box-2">font-size:0;ling-height:24px</div>
为了更直观下面可以看到直接的执行结果。
line-height的影响
查看代码详情请猛戳链接查看 line-height的影响的demo。
结果显而易见的告诉了我们是内部元素的行高撑开外围没有设置高度元素，并使其拥有了高度。造成这种“神秘”现象的背后原因不是font-size而是隐藏起来的终极BOSSline-height。
继续复习《vertical-align的简单介绍》中的知识点。为了阅读方便不额外打开窗口占用浏览器的资源，下面我直接引用这篇文章中的图片和文字。
首先需要了解的行框和行内框的概念，图文混排才是王道。我会裁剪掉一些无关的文字使阅读更顺畅。
行内框
行内框（inline box）是一个浏览器渲染模型中的一个概念，不能直接观测到无法显示出来，但是它又是确实存在，它的高度就是行高(line-height)指定的高度。行框
行框（line box），同行内框类似的概念，行框是指文本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。
行框和行内框
加粗部分的文字是重点！！！结合图片展示的概念，也很好理解。这里面说话分量最重的就是行内框（inline box），它来决定行框（line box）的高度。而行框才会“撑”起外围元素。这个链条的最起点就是line-height。原因就是红色文字部分。
关于行框（line box）还有一个小小的知识点，无论行框（line box）所占据的高度是多少（不管比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线。这一重要的特性可以用来实现文字或图片的垂直居中对齐。例如上文的例子中可以直观的看到效果。
例如我们在日常工作中经常遇到的就是把文字的行高设置成容器的高度就可以让文字在容器内垂直居中。这句话也是表象的、是错误的、是不全面的。应该说是设置成合适的行框大小。其实道理已经阐述的很明白了，配合上图片也很好理解。逻辑链和知识链也是相对线性，没有那么多弯弯绕。所以关于知识的介绍就到这里吧~
最后补充说明下，关于行高的值的设置问题。由于行高能撑开外围元素，在有文字的网页的版面设计中，行高的灵活运用会让作品更友好，对网站用户的粘性有相当的作用。如何灵活运用行高，这个需要一定的前端经验、CSS基础知识、美工感知和协调控制。我只干我擅长的方面，在CSS基础知识方面多下功夫以此尽量弥补其他的不足，随着经验的积累其他方面再去刻意的适当训练下，驾驭版面的能力肯定会产生质变。
我的另外一篇文章也是关于行高的，看一下不会太费时间。想看的话就猛戳后面>>>>《line-height属性值设置1.5和1.5em有啥不一样？》
最后的最后插上一句，我的文章对于早期版本的浏览器很少去考虑，尤其是对于IE8-版本的浏览器我是直接无视的。原因有几点：不更新浏览器版本的人要么是守旧没有接触新鲜事物勇气的心理学意义的老人，要么就是对计算机知识和互联网不敏感的人。这两种人中不管哪一种人对都会被这个发展迅捷的社会给无情的抛弃。信息社会人的基础必会技能就是驾驶、英语和计算机。
报告完毕~~~
网友评论