大家好，我是IT修真院武汉分院第11期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网css任务5，深度思考中的知识点——如何理解vertical-align与line-height？
一.背景介绍
随着互联网的快速发展，人们对网页美化的追求也达到了一个新的高度，为了使网页更好看，我们需要给行内元素设置它的位置，这次给大家分享设置文字的两个属性：line-height和vertical-align
二.知识剖析
1.LINE-HEIGHT基本概念
定义：行高是指文本行基线baseline之间的垂直距离
1.1） LINE-HEIGHT属性可赋值
注意：a、行高是可以被继承的，数字可以直接被继承，然后在计算行高；而百分比是先计算出行高，在以px继承
b、行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度。
2.VERTICAL-ALIGN基本概念与应用
定义：使行内元素的基线相对于该元素所在行的基线的垂直对齐
2.1） VERTICAL-ALIGN的值
注意：vertical-align的百分比值不是相对于字体大小或者其他什么属性计算的，而是相对于 line-height计算的。
3.常见问题
图像元素在块级元素底部为什么留有空白？
4.解决方案
图像的默认垂直对齐方式是基线对齐(基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙
1)、直接修改父级line-height值为0；
2)、设置为display：table-cell；
3)、设置vertical-align：top/middle/bottom;
5.编码实战
6.拓展思考
有哪些方法可以实现垂直居中？
1）.单行文字垂直居中使用LINE-HEIGHT属性
2）.使用VERTICAL-ALIGN属性实现居中
3）.使用TABLE-CELL布局
4）.使用PADDING和MARGIN
5）.使用TABLE布局
6）.使用FLEX弹性布局：设置父元素display:flex，使用align-items:center
7）.使用绝对定位
绝对定位后设置top和left为50%，然后设置负边距
8）.使用DISPLAY:-WEBKIT-BOX
在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。content 清除浮动，并显示在中间。
7.参考文献
参考一：line-height 和 vertical-align 行高与行对齐精解
参考二：深入理解line-height与vertical-align
参考三：纯 CSS实现垂直居中的几种方法
8，更多讨论
1）CSS中line-height与height的区别？
简单来说，line-height是行高的意思，height则是定义元素自身的高度。
例如下面这段代码
如果我们定义.test {line-height:20px;}，那么这个元素的实际高度将取决于其中内容的多少，假如文字部分在浏览器里面显示为一行，那么这个div的实际高度就是20px，如果文字显示为两行，那么div的实际高度就是40px，而且文字的行高是20px的；
如果我们定义.test{height:40px}，那么这个元素的实际高度一般并不会因为内容的多少而发生改变，如果文字显示为一行，那么这个div的高度仍然是40px，如果显示为2行，但是文字的行高不够20px，这个div的高度也不会因为文字内容的高度小于height而发生改变。不过如果文字内容的高度大于40px了，一般来说这个div的高度还是会相应增加的。
2）怎么运用vertical-align才能生效？
父元素（inline-block\block）必须含有line-height（inline元素有无皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。
vertical-align不可继承，必须对子元素单独设置。
3）为什么设置line-height文字会居中？
首先行高是文字的字符大小和字符上下的边距决定的，关键就是这个上下的边距是相等的，你可以把行高想象是两条看不见的水平平行线，而在平行线内，字符与平行线上下的边距总是相等的，就是垂直居中的意思。
而height这个属性是盒子属性的高度，盒子并没有像行高这样与上下的边距是相等的要求。而是默认在左上角
所以不是行高line-height与文字高height一样就能让文字居中，而是应该这样理解，字符本来就在行高内垂直居中了，只是行高与文字的盒子高度不等，导致不能在盒子里垂直居中，如果我们把行高line-height与盒子的height设置为一样大，意思就是行高的平行线与盒子的上下边重合了，这时字符当然仍是在行高内垂直居中，但也顺便在盒子内垂直居中。
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
