一、line-height 介绍
linge-height 指两行文字之间的基线距离
image.png
-
行高的属性
image.png
1、normal 行高的默认值
该值一般为数值。不同的字体有不同的值，该值由字体的设计者提供。
也正是该值是由不同的字体决定的，所以默认的行内盒子，在设置不同的字体时会有不同的高度。
2、number
该值为字体的倍数值
3、 length 固定单位值
px em rem pt
4、百分比
该值为字体的倍数
5、继承
- 数值、百分比、em的区别在于他们的继承性质
数值继承的是父元素设置的值，再根据自己的字体大小来计算得出值
百分比和em则是继承父级计算好了之后的值
例如字体大小为60px, 父级字体为30px
如果父级行高为 1.5 那么他的子元素行高为 1.5 * 60
如果父级行高为 150% / 1.5em 那么他的子元素行高为 1.5 * 30
二、行内框盒子模型
- 一个行内框模型可能有以下几种盒子 参考张鑫旭老师
image.png
image.png
1、内容区域指包含文字的区域，他的大小由font-size决定。
同一个字体大小的不同文字，大小是不一样的，所以导致了他们的内容区域高度也会不一样
2、内联盒有两种，一种为普通内联盒子和匿名内联盒子
- 普通内联盒子为可选择的，如（i / em / a）等标签。
- 匿名内联盒子是不可选择的，没有标签包含的普通文字组成。
3、行框盒子
- 行框盒子由每一行的内联盒子组成，
<br/>换行或者高度不足换行都会新生成一个行框盒子。行框盒子会尽可能包含该行内的所有内联盒子。
4、包含盒子包含了所有的行框盒子，高度由各个行框盒子高度的累加。
三、内联盒子的高度
1、内联盒子的高度由行高间接来决定的。
内联盒子的高度是由 行间距和内容区域决定其的高度的,但是因为行间距的高度 + 内容区域的高度 必须 = 行高，所以如果设置了行高，就会间接的决定了高度。
四、行高的应用
1、设置行高实现近似文字的垂直居中, 不必设置高度。
2、实现多行文本垂直居中。
.box {
background: #ccc;
line-height: 200px;
text-align: center;
}
.box > .text {
display: inline-block;
vertical-align: middle;
line-height: normal;
}
3、实现图片近似垂直居中，
image.png
