前置知识：
1.内联盒子模型
-
块级元素中放置着行内元素，内联盒子模型决定行内元素如何摆放。
html <p>文字,<em>呵呵</em>!</p>"文字"没有被行内元素包裹，是匿名内联盒子；"呵呵"则是普通内联盒子。 -
行框要包含最高的内联盒子和最低的内联盒子，多行则有多个行框。
-
内联盒子的高度由
line-height值决定，并且有默认值；若font-size不同，则行框里的多个内联盒子的高度不一致。 -
内联盒子的组成：
 line-height:（行高-内容区）/2 = 上下行间距 ； 行间距平分剩余高度 -
内容区是由多个字体框组成的，且位置不确定
2. line-height 行高
- 当放在块状元素上时标识的时候，即表示每个行框的最小高度。
- 由于
line-height:（行高-内容区）/2 = 上下行间距公式，得出上下行间距是固定相等的，因此可以利用line-height=height实现垂直居中 - 当
font-size数值大于行高时，会出现文字溢出（公式）；因此行高的数值为Number，根据文字大小自动计算
3. text-align、vertical-align属性
- 具有继承性，用在行内、行内块元素上
vertical-align:middle:元素的垂直中心点（中线）和父元素的x的1/2处对齐。-
img本身就是内联盒子，因此具有绝对的垂直中心线 -
文本默认对齐方式：基线对齐（baseline）,基线是内联盒子中小写英文字母x的下边缘。
红色的x设置
vertical-align：middle，以第一个x的1/2处为标准对齐 -
当最高的内联盒子设置
vertical-align：middle，由于没有移动空间不会进行移动，而是由父盒子内的其他行内元素进行移动，并默认基线对齐 -
内联盒子中内容区中的字体不会正好占据内容区的1/2，字体都会设计的正好有一些下沉，根据
font-family不同，与中心点的偏差不同，因此vertical-align：middle只是近似垂直居中。
-
4.幽灵节点
- 在HTML5文档声明中，行内元素的所有解析和渲染如同每个行框盒子前面有一个空白的节点，并且无法获取
5.图片缝隙原理
div存在幽灵阶段x，img默认和x基线对齐，x内联盒子由上边距、内容框、下边距组成，多出来的缝隙即为x的下边距。- 解决方式：
- 1.设置
font-size为 0 - 2.将图片设置成块状元素：只有行内元素存在幽灵节点
- 3.
img设置vertical-align：top/bottom/middle，img本身占据所有空间不会进行移动，而幽灵阶段进行移动。
vertical-align：bottom：行内元素与行框底部对齐，图片上方出现空白，而由于行框必须包裹行内元素，因此div上方出现空白，并自动补齐。 - 1.设置
6.行内块状元素对齐
-
行内块元素，如果里面没有行内元素及内容，基线是元素的底部；如果里面有行内元素及内容，是以最后一行的文本的基线作为对齐。
7.文本垂直居中（多行）
- 1）父元素利用
line-height=height，将幽灵节点x垂直居中 - 2）
line-height具有继承性，因此子元素需要清除设置：line-height：normal - 3）
line-height、vertical-align不影响块状元素，需要转换成行内块元素 - 4）设置
vertical-align：middle，使其中心线与x的1/2处对齐 - 5）由于基线x存在下沉，因此对齐存在偏差（近似垂直居中）
- 6）父元素设置
font-size：0，子元素重新赋值（但仍存在1-2px的偏差）
<style>
#f{
width:500px;
height:500px;
/* 1.设置line-height=height */
/* 让父元素的x或幽灵节点移动到中间 */
line-height: 500px;
border:1px solid green;
}
#z{
/* 3.因为div属于块状元素不能够被line-height和vertical-align影响，所以需要改变显示模式 */
display:inline-block;
width:300px;
/* 2. 因为line-height具有继承性所以需要先将继承下来的东西清除掉 */
line-height: normal;
/* 4.设置整个的#z的中线和x的1/2处对齐 */
vertical-align: middle;
border:1px solid red;
}
</style>