CSS

深入解析vertical-align line-height属性

1.vertical-align

默认值:baseline 即设置该属性的元素的基线(baseline)与行框的基线对齐。W3C上描述的是与父级元素的基线对齐是不准确的,比如出现多行的情况。
生效的对象 : 只对inline,inline-block的元素有效,对块级元素无效。
继承性:无继承性
常用的值:
baseline :元素的基线与行框的基线对齐。
middle : 元素所在行内框的中线与行框的中线对齐。
top : 元素所在行内框的顶边与行框内高度最大的行内框顶部对齐
bottom : 元素所在行内框的底边与行框内高度最大的行内框底部对齐
固定值 : 元素的基线相对行框基线向上(为正值时)或向下((为负值时)偏移指定距离。
text-top :元素顶部与行框内的匿名文本的顶部对齐。
text-bottom :元素底部与行框内的匿名文本的底部对齐。
行内元素在布局时,首先也是最重要的是确定行框的基线位置

2.line-height

line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容,而不会直接影响块级元素,也可以为一个块级元素设置line-height,但这个值只是应用到块级元素的内联内容时才会有影响。在应用到块级元素时,line-height定义了元素文本基线之间的最小距离,即最小行高

line-height不会对inline-block的元素直接起作用,但可能会作用在inline-block的子元素上,这样间接改变inline-block高度
默认值:normal(大概是font-size的1.3倍)
应用于:所有元素
可继承
常用值:
固定值 : 会被子元素继承这个定值
normal :相当于数字1.3
百分数:相对于元素的font-size计算(font-size可继承)。这个值会被子元素继承下去(计算出来的定值)。
数字 :相对于元素的font-size计算,但是子元素只会继承这个数字,然后根据自己的font-size计算各自的line-height

3.替换元素和非替换元素

替换:img input button textarea 自定义的inline-block
非替换 : i,a,span等

4.各种行内元素的基线与中线位置

Input框
基线位置 输入的字母x的底部,
middle线 位置, 包含margin之后这个行内框高度的中间。middle对齐时就是middle线与行框的x的中心对齐

Textarea ,img
基线位置 元素底部(含margin框哦) middle线位置 包含margin之后这个行内框高度的中间。

Button按钮
基线位置 里面字母x的底部,middle线位置,包含margin之后该行内框高度的中间 。

自定义inline-block
只有一行的inline-block 如果加上了overflow属性,其表现和 textarea img是一样(我也不知道原理是啥,input框基线位置不会受overflow影响) ,基线为包含margin之后该行内框高度的底部 。不加的话 基线位置 在里面字母x的底部
overflow只影响inline block的基线位置,middle线位置不管怎样都是 包含margin之后该行内框高度的中间

对于里面有多行的inline-block
没有overflow属性的情况下,基线位置 这个inline-block里最后一行(如果只有一行,那这行就是最后一行)的行框里面的x的底部 ,不管这个inline block是否定高,内容是否溢出, 也就是说就算里面的内容超出了block的边界,基线位置还是最后一行的x的底部。
设置了overflow属性之后,基线位置和单行时的情况是一样的。
middle线的位置为包含margin之后该行内框高度的中间 。

Inline元素
这里我把由display为inline的标签包裹的字体形成的盒子,称为字体盒子(自己起的名字),像这种xxx ,在chrome中检查元素,包裹字体的蓝色块就是个字体盒子。字体盒子的高度只和font-size有关,默认大概为font-size的1.3倍,在span里面改变line-height,字体盒子的高度不会变化,但是注意虽然字体盒子的高度没变,但是字体盒子所在的inline box的高度是变了的(line-height改变的),我们用眼睛看不到这个高度的。字体盒子的高度的中间线和该inline box的高度中间线是重合的,也就是说字体盒子是在inline box的中间的,并不是文字在中间,因为字体盒子的中间并不是文字的中间 。像这种inline元素的基线位置在字母x的底部,middle线在这个inline box高度的中间,也是这个字体盒子的中间(不是字体的中间),因为无论line-height比字体盒子高度大还是小,它的中间线和字体盒子的中间线都是重合的。

在进行行内元素布局时,每个inline box会根据自己的vertical-align去找参照物对齐。然后计算最高的inline box的顶部和最低的inline box的底部间的距离,这就是这行的高度了。

行框的middle就是确定基线的那个x的中线(过中心交点的平行线)
关于这些只在chrome上试过,其他浏览器规则是否一样有待试验。

用来测试的代码

<!DOCTYPE html>
<html>
<head>
	<title>demo4</title>
	<style type="text/css">
		input {
			width: 150px;
			height: 80px;
		}
		textarea {
			width: 200px;
			height: 100px;
		}
		div{
			background-color: #ccc;
		}
                input {
                        font-size: 30px;
                        width: 150px;
                        height: 80px;
                         vertical-align: middle;
                        /* margin-bottom: 17px; */
                        overflow: hidden;
                 }
                 textarea {
                        width: 150px;
                        height: 134px;
                 }
	</style>
</head>
<body>
	<div style="
    /* line-height: 100px; */
">xX
<input type="text" name="" placeholder="input">
<textarea style="
    vertical-align: middle;
">textarea</textarea>
    <button style="
    vertical-align: middle;
    margin-bottom: 0px;
    height: 100px;
">x</button>  x
    <span style="
    display: inline-block;
    vertical-align: baseline;
    height: 30px;
    /* width: 20px; */
    /* overflow: hidden; */
    margin-bottom: 10px;
">x<br>x</span>
    <span style="
    /* overflow: hidden; */
    /* font-size: 30px; */
    line-height: 6px;
    vertical-align: middle;
    /* margin-bottom: 10px; */
">xx<span></span></span></div>
</body>
</html>

感谢:
深入了解css的行高Line Height属性
深入理解line-height与vertical-align
我对CSS vertical-align的一些理解与认识(一)
CSS深入理解vertical-align和line-height的基友关系