本文主要是介绍vertical-align 与 line-height，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vertical-align 适用范围
inline
inline-block
table - cell (起作用的是 table - cell 本身)
但是有以下条件的，则不适用：
display: absolute
float 使得该元素变成块级元素
vertical-align 与 line - height 联系
通过百分比实现
基线与外边界
vertical-align 的默认参考点是 baseline（基线）
行内元素
外边界： 与自己行高的上、下边对齐
基线：字符恰好位于其上的那条线（基线总是穿过字体高度一半以下的某一点）行内块元素
外边界：其外边距盒子的上、下两边
基线：
（1）有流内内容的行内块元素：基线就正常流中最后内容元素的基线
（2）无流内内容 或者 有流内内容但overflow属性值不是visible的行内块元素 ：基线与行内块元素的下外边界重合行盒子
外边界：行盒子的顶边与该行中最顶部元素的顶边重合，底边与该行中最底部元素的底边重合。
基线： 围绕基线的是行盒子中的文本盒子, 文本盒子的高度等于其父元素的font-size
Vertical-Align的值
字母’x’在CSS中
- 基线
line-height 行高的定义就是两基线的间距；
vertical-align的默认值就是基线，
字母x的下边缘(线)就是我们的基线
- x-height
x-height 指的是小写字母 ‘x’ 的高度
vertical-align: middle；指的是基线往上1/2 “x-height”高度，即字母x交叉点那个位置，但并不是绝对的垂直居中对齐，我们平常看到的middle效果只是一种近似的效果，因为不同的字体，其在行内盒子中的位置是不一样的，比方说’微软雅黑’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下一点。
- ex
1ex 就是一个x的高度
行内、块状、行内块状元素的特点
行内元素
不能识别宽高
不会以新行开始块状元素
可以识别宽高
会新起一行行内块状元素
可以识别宽高
不会以新行开始
line-height
行高：指两行文字间基线之间的距离。
行高的垂直居中性：line-height的最终表现是通过line boxes实现的，而无论line boxes所占据的高度是多少，其占据的空间都是与文字内容公用水平中垂线的
垂直居中的应用
1）单行文字 ：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中
2）多行文字
3）图片
- line boxes盒模型
1) content area：一种围绕文字看不见的box
2) inline boxes： 不会让内容成块显示，而是排成一行，如果外部含inline属性的标签（span,a,cite）,则属于inline boxes,如果是个光秃秃的文字，则属于匿名inline boxes
3) line boxes： 一个一个的inline boxes组成了line boxes（ 高度是由其内部最高的inline boxes的高度）
4) containing box：包含以上的所有 boxes
目前css中，所有的高度都是由两个css模型产生的，一个是box模型，对css“height+padding+margin”,另一个是line box模型，对象样式为line-height
浮动为什么会使得元素没有高度？
inline boxes的高度直接受line-height控制，而真正的高度等于内部最高的inline box,而没有inline boxes,就没有高度了，而浮动恰恰是将元素的inline boxes破坏了，于是这些元素就没有高度了。
无inline box -> 无line box -> 无高度,但仍然在文档流中
替换元素 与 非替换元素：
- 替换元素
是浏览器根据其标签的元素与属性来判断显示具体的内容。
比如：<input > <img>、<input>、<textarea>这些元素都没有实际的内容。
- 非替换元素：
将内容直接告诉浏览器，将其显示出来。
比如<p>wanmei.com</p> 浏览器将把这段内容直接显示出来。
这篇关于vertical-align 与 line-height的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
