基线、行高、行内框、行框、vertical-align等概念理解

一、基本理论

1. 基线：一行字横排时下沿的基础线，基线并不是汉字的下端沿，而是英文字母x的下端沿。

2. 行高：文本行的基线间的距离

3. 行距：行高与字体尺寸的差称

4. 字体尺寸：font-size

5. 内容区域：一行中的每个元素都有一个内容区域，它是由字体尺寸决定的

6. 行内框：在没有其他因素影响的时候，行内框等于内容区域，而设定行高则可以增加或者减少行内框的高度。即：将行距的值（行高-字体尺寸）除以2，分别增加到内容区域的上下两边。

设置行高后，行高 === 行内框高？？？  不一定

高度大于行高的图片会把行框撑开。此时，虽然撑开了行框，却不会影响行高。

当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，

如何计算行高，使得元素在指定区域内上下居中，间距适宜？   行距*2+font-size；当行高小于字体大小时将出现行距为负数的情况，也就是两行文字将部分重合。

行框：指本行的一个虚拟的矩形框，其高度等于本行内所有元素中行高最大的值

单行纯文本的垂直对齐：height = line-height

元素默认的垂直对齐方式为基线对齐

而像图片或者输入框这样的元素，本身没有基线，则将其底端同父元素的基线（行框的基线）对齐

二、案例解析

1. 为什么

<style>
     .box { height: 500px; background: red;}
     span{background:yellow;}
     img { height: 200px; width: auto; }
</style>
<div class="box">
    <img src="../xx.jpg">
    <span>XXX</span>
</div>

理解：图片的底部与该行的行框的基线（X的底部）对齐；当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，

2. 为什么

在上述样式的基础上为box增加line-height: 500px;

解释：行框增加为500px，height=line-height使得XX文本在行内垂直居中，图片的底部与该行的行框的基线（X的底部）对齐。当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐，

3. 为什么

在上述2样式的基础上为图片增加vertical-align: middle;

解释：当行内含有图片的时候，图片和文字的垂直对齐方式默认是基线对齐。当我们设置了垂直对齐方式vertical-align: middle;后，图片不再遵循基线对齐，而是中间对齐。中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐。

三、vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit 

   说明： 设置元素内容的垂直对齐方式。 
   参数： 

1.  baseline：使元素的基线同父元素的基线（行框的基线）对齐； 使元素的基线同基准元素（取行高最高的作为基准）的基线对齐 
2. sub（ super： 使元素的基线（替换元素的底 端）相对于父元素的基线升高，下标（vertical-align:sub）使元素的基线降低 
3. top（bottom）：是将元素的行内框的顶端（底端）与行框的顶端对齐
4. text-top（text-bottom）： 是将元素行内框的顶端（底端）同文本行的顶线对齐
5. middle：通常使用在图片上，将图片的垂直方向的中线与文本行的中线对齐   
6. 百分比和长度： CSS2，可为负数。 

 初始值：baseline 

继承性：不继承

参考文档：
http://www.jb51.net/css/29328.html
https://www.cnblogs.com/doctor-chen/p/6049374.html
http://www.zhangxinxu.com/wordpress/2009/11/css%E8%A1%8C%E9%AB%98line-height%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%90%86%E8%A7%A3%E5%8F%8A%E5%BA%94%E7%94%A8/
https://blog.csdn.net/q121516340/article/details/51483439