vertical-align 与 line-height

vertical-align 适用范围

  • inline

  • inline-block

  • table - cell (起作用的是 table - cell 本身)
    vertical-align 与 line-height_第1张图片
    vertical-align 与 line-height_第2张图片

但是有以下条件的,则不适用:

  • display: absolute

  • float 使得该元素变成块级元素

vertical-align 与 line - height 联系

通过百分比实现

vertical-align 与 line-height_第3张图片

基线与外边界

vertical-align 的默认参考点是 baseline(基线)

  • 行内元素
    外边界: 与自己行高的上、下边对齐
    基线:字符恰好位于其上的那条线(基线总是穿过字体高度一半以下的某一点)

  • 行内块元素
    外边界:其外边距盒子的上、下两边
    基线:
    (1)有流内内容的行内块元素:基线就正常流中最后内容元素的基线
    (2)无流内内容 或者 有流内内容但overflow属性值不是visible的行内块元素 :基线与行内块元素的下外边界重合

  • 行盒子

外边界:行盒子的顶边与该行中最顶部元素的顶边重合,底边与该行中最底部元素的底边重合。
基线: 围绕基线的是行盒子中的文本盒子, 文本盒子的高度等于其父元素的font-size

Vertical-Align的值

vertical-align 与 line-height_第4张图片

vertical-align 与 line-height_第5张图片

vertical-align 与 line-height_第6张图片

字母’x’在CSS中

  • 基线

line-height 行高的定义就是两基线的间距;
vertical-align的默认值就是基线,
字母x的下边缘(线)就是我们的基线
vertical-align 与 line-height_第7张图片

  • x-height

x-height 指的是小写字母 ‘x’ 的高度
vertical-align: middle;指的是基线往上1/2 “x-height”高度,即字母x交叉点那个位置,但并不是绝对的垂直居中对齐,我们平常看到的middle效果只是一种近似的效果,因为不同的字体,其在行内盒子中的位置是不一样的,比方说’微软雅黑’就是一个字符下沉比较明显的字体,所有字符的位置相比其他字体要偏下一点。
vertical-align 与 line-height_第8张图片

  • 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 -> 无高度,但仍然在文档流中

替换元素 与 非替换元素:

  • 替换元素

是浏览器根据其标签的元素与属性来判断显示具体的内容。

比如: