CSS中，display属性、行高属性line-height以及垂直对齐方式vertical-align属性详细探讨

在CSS中，line-height属性往往是我们调整行距的方法，今天这篇文章来尝试探讨这一属性，首先了解几个概念：

1. 块级元素与行内元素：

    HTML元素分为两大类，块级元素（包括p、h1、div等元素）以及行内元素（又称短语元素，包括strong、span等元素）

2. 行框：

    在我个人的理解中，在正常的文档流情况下，从上到下渲染的水平单元就是行框。而行框内部是从左到右进行渲染的，行框是由行内框水平排列形成，虽然行框实际上是不存在的，但这一概念方便我们理解浏览器解析CSS的过程。

    一般来讲，每个块级元素独占一个行框，而一行相邻的行内元素共同存在同一个行框里，

3. display:

    display属性用于定义建立布局时元素生成的显示框类型,上面提及的块级元素即display: block,而行内元素即display: inline

而将display属性设为inline-block则称为行内块元素，即多个块可以共同存在同一个行框中。

4. display: inline-block与display: inline的区别：

    由上可知，我们将一个块级元素的display属性设置为inline-block或者inline都可以有效的将其水平地排列，两者的区别就是： inline-block属性保留了元素的块特性，使得对元素改变content,padding,border,margin属性可以有效的改变本身的行高（后面会讲到这一概念），而inline属性则没有保留元素的块特性，因此对元素改变content,padding,border,margin属性无法改变的行高，只能改变行内元素之间的水平边距。

5. 在行内的普通文本以及行内元素，顶线、中线、基线、底线的定义如图：

其中，顶线和底线分别是文本的最顶端和最低端，文本总是包裹在顶线和底线之间的内容区中，而基线指的是小写字母x的下端沿，中线位于基线上方，与基线距离为半个小写字母x的高度（即0.5ex），大部分浏览器会认为1ex=0.5em，所以中线高于基线0.25em

6. 行高：

    line-height是