vertical-align和line-height的那些事
可能是又遇到了瓶颈，好长时间感觉css上没什么可看。从来没觉得css有什么难，什么盒模型和各种流也觉得理解起来毫不费力，但好像仅限于此。对一些属性仅限于常用，有时会去做实验验证一些属性，过后就忘了。现在想想，这一部分是因为有些属性确实生僻，在实际生产中用的不多；还有就是有些我以为是常见的，但是却没有去深入理解为什么会如此。废话不多说了，也别问我为什么忽然像受了打击一样，因为确实受了打击...不想说
- vertical-align
- 定义：设置元素的垂直对齐方式，定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式，那么问题就来了，什么是基线？
- 基线，字母下边缘所在的线，不同的字体会有微小的差别，比如微软雅黑会相对于下沉一些，但是基本都是一致的；但是理解起来，总感觉有点费劲，毕竟我们不是只靠字母x就能存活一辈子的。那怎么记呢？你可以理解成，我们在英语本上写字母时，像是字母a,e,o,x等下边缘所在的那条线，这样的话是不是就好记一些了呢？
- 注意的点：vertical-align的应用对象是display:inline-block以及display:inline的元素
2. line-height
- 定义：设置行间的距离（行高），该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
- 可能的值：num,length,%;
- 一些难点：line-height = 内容区域高度+行间距，所谓的内容区域高度，你可以理解成我们用鼠标选中文字时文字下面出现背景色的区域，内容区域高度只与字号和字体有关，比如宋体时，内容区域高度等于字号；所以说，line-height的默认属性值normal也是与字号和字体有关，也就是说与浏览器和默认字体有关。前面推了一堆，其实想证明的就是line-height的默认值不是一个定值，所以我们一般都会reset。那么，当我们reset的时候，它的三种取值是不是效果都一样呢？下面让我来给大家验证一下，来段代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vertical-align详解</title> 6 <style> 7 body { 8 font-size: 16px; 9 } 10 .p-container { 11 background-color: greenyellow; 12 line-height: 1.5rem;//当取值为数字时后面的值为1.5，取值为百分数时后面的值为150% 13 font-size: 20px; 14 } 15 16 .p-container p { 17 font-size: 14px; 18 } 19 20 </style> 21 </head> 22 <body> 23 24 <div class="p-container"> 25 <p> 26 这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 27 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 28 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 29 30 </p> 31 32 <p> 33 这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 34 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 35 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 36 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 37 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点， 38 不过影响不大这样想下是不是就理解了呢？但是我们需要注意的一点是不同的字体的基线会有一点点出入——微软雅黑的基线就会相对于标准的基线稍稍下沉一点，不过影响不大 39 </p> 40 </div> 41 42 </body> 43 </html>
然后我们看下当取值为1.5rem的效果
- 一些难点：line-height = 内容区域高度+行间距，所谓的内容区域高度，你可以理解成我们用鼠标选中文字时文字下面出现背景色的区域，内容区域高度只与字号和字体有关，比如宋体时，内容区域高度等于字号；所以说，line-height的默认属性值normal也是与字号和字体有关，也就是说与浏览器和默认字体有关。前面推了一堆，其实想证明的就是line-height的默认值不是一个定值，所以我们一般都会reset。那么，当我们reset的时候，它的三种取值是不是效果都一样呢？下面让我来给大家验证一下，来段代码
我们需要注意的一点是：body，.p-container,.p-container p 的字号分别是16px,20px和14px,当我们把p-conainer的line-height设置成1.5rem的时候，p
的行高为24px，24px是怎么得出的呢？是用body的16px*1.5得出的结果，因为rem和em的参考对象一般都为body的字号
然后我们看下取值为150%的效果
此时.p-container p的行间距为30，很明显这个行间距是20*1.5得出的，先不说结论再看一下，取值为1.5，也就是我们常用用法的效果
此时的line-height变成了21px，也就是p元素的14*1.5所得，那么此时你是否懂得了什么呢？
当line-height取值为数值的时候，所有的子元素会重新计算行高；而当line-height的取值为length和百分数的时候，line-height是根据当前元素的font-size计算行高，继承给下面的元素，当然取值为length的时候(px除外)，这个当前元素就是body。
存在即合理，好像确实有点对啊···
嗯，下面我们再看一下line-height对我们布局的影响，代码是这样的
<div style="background-color: #d51875;"> <img src="img/6.jpg" alt=""/><span style="background-color: #fff;">李钟硕</span> </div>
然后效果是这样的
将一个图片插入一个块级元素时，下方默认会有间隙，为什么呢？图片的display:inline-block所以图片也有vertical-align，也有基线，行间距也会对它有影响所以消除底部间隙的一个方法就是让图片display: block;
方法2：既然图片可以应用vertical-align那便让图片的底部对齐；
方法3：基线上移，基线上移影响的是什么呢？对，行高——基线之间的距离，让行高足够小，当然让字号为0也可以，都是去改变包含图片容器的行高因素。
难道，line-height就这么点卵用吗？当然不是！还有一个，多行文本水平垂直居中~~
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vertical-align详解</title> 6 <style> 7 body { 8 font-size: 16px; 9 } 10 .box {
height: 250px; 11 text-align: center; 12 background-color: #009900; 13 line-height: 250px; 14 } 15 16 .box .text { 17 display: inline-block; 18 vertical-align: middle; 19 line-height: normal; 20 background-color: #e3372d; 21 } 22 23 24 </style> 25 </head> 26 <body> 36 <div class="box"> 37 38 <div class="text"> 39 line-height默认属性值与用户的浏览器和元素字体有关，所以normal是个不确定的值；数值作为行高，是根据当前元素的font-size来计算的比如font-size:20 ;line-height:1.5;那么行高为20*1.5=30 40 41 具体长度值如15rem等；百分比相当于数值 42 43 当行高为数值时，所有子元素会重新计算行高；百分比和长度值是当前元素根据font-size计算行高，继承给下面的元素；所以作为全局设置一般使用数值 44 </div> 45 </div> 46 47 48 </body> 49 </html>
效果是这样滴
嗯，这个就不解释了，相信你如果可理解上面的，这个也应该明白。
以上内容是在慕课网上看完张鑫旭大大的视频之后，得出的笔记以及自己的一些想法，如果有错误的地方，欢迎批评指正。
