关于line-height设置的问题

1、介绍

• 在平时做项目的时候，因为盒子高度使用的百分比，就想尝试行高也设置为100%，来实现这个垂直居中，但是效果并不会想我们想象的这样，今天就来重新认识一下行高
• line-height 指一行字的高度，包含了字间距，实际上是下一行基线到上一行基线距离
• 行高也是可以撑开容器高度的，当元素没有定义 height 属性时，元素表现的高度是由 line-height 决定的
• 我们一般常常用来把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中
• 经过简单的介绍，我们来具体看看如何设置 line-height

2、首先行高是个可以继承的属性，一般有三种

//1、可以使用带单位的值比如px、em等
//2、可以使用纯数字
//3、还可以使用百分比

1、带单位的值比如px、em等

1、用带单位的值px为例 
  具体带单位的值可以单独给子元素设置，也可以继承父元素的值
<div class="box">
   <div class="a">
    ABCDE
   </div>
   <div class="b">
    ABCDE
   </div>
</div>
<style>
   .box{}
   .a{
    background-color: aquamarine;
    line-height: 50px;
   }
   .b{
    background-color: cornflowerblue;
    line-height: 30px;
   }
</style>

效果：

2、用纯数字，这里我们要注意一下，纯数字一般用来给父元素设置，然后子元素具体行高是根据父元素设置的值乘以子元素自己的font-size的值，只给子元素设置是没有效果的

结构不变
.box{
    line-height: 2;
   }
   .a{
    background-color: aquamarine;
    font-size: 15px; //line-height =2*15 = 30px
   }
   .b{
    background-color: cornflowerblue;
    font-size: 20px; //line-height =2*20 = 40px
 }

效果

3、使用百分比，百分比也是给父元素设置，但是不同于纯数字的是，子元素的行高是根据父元素的font-size 乘以父元素设置的百分比（这也是为什么我给子元素设置100%，没有达到我预期的原因）

.box{
    line-height: 200%;
    font-size: 20px;
   }
   .a{
    background-color: aquamarine;
    font-size: 12px;//行高=20*200% = 40px;
   }
   .b{
    background-color: cornflowerblue;
    font-size: 12px;//行高=20*200% = 40px;
   }

效果：

• 如果有错误，请及时留言，以免误导其他同学，谢谢