vertical-align 与 line-height

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---