大家好，我是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设置为一样大，意思就是行高的平行线与盒子的上下边重合了，这时字符当然仍是在行高内垂直居中，但也顺便在盒子内垂直居中。
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
网友评论