深入理解之line-height

一、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、行框盒子

• 行框盒子由每一行的内联盒子组成，
换行或者高度不足换行都会新生成一个行框盒子。行框盒子会尽可能包含该行内的所有内联盒子。

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