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> 浏览器将把这段内容直接显示出来。