重新认识font-size、line-height和行高

快来打我* 2021-06-26 16:06 557阅读 0赞

`line-height`，`font-size`均是`css`格式中很常设置的样式，这两个样式会对元素产生什么影响呢？从样式的名字来看，分别代表行高和字体大小的意思，那么`line-height`真的等于行高吗？`font-size`又是否和行高有关系呢？

## 基本定义 ##

首先来看一些术语的基本定义

*  `line-height`：`line-height`属性是指文本行基线之间的距离，而不是字体的大小
 *  内容区：非替换行内元素中，内容区就是由元素中字符描述的框。替换元素中，内容区的高度是元素的固有高度加上内外边距和边框值。
 *  行间距：行间距是值`line-height`和`font-size`值之差。这个差会分为两半，分别应用于内容区的的顶部和底部，行间距只应用于非替换元素。
 *  行内框：行内框通过向内容区增加行间距来描述，对于非替换行内元素，行内框的高度刚好等于`line-height`的值，对于替换元素，元素行内框的高度恰好等于内容区的刚度，因为行间距不应用到替换元素。

## 行的组成 ##

每一行都有一个隐藏的行框，行框的高度由行内框决定，每行的行框是包含该行中出现的行内框的最高点和最低点的最小的框，而行内框可能和`font-size`,`line-height`等多种元素有关，并且依据元素类型的不同，这两个样式会有不同的表现。

### `font-size`和行内框 ###

关于`font-size`的基本要点如下：

*  应用范围：所有元素
 *  继承性： 有
 *  意义： 确定字体的大小

`font-size`能够确定字体的 大小，可以应用于所有元素，并且具有继承性，当`font-size`应用于不同类型的元素时，意义也不尽相同。

1.  `font-size`应用于行内非替换元素时  
    行内非替换元素一般是文本的容器，这里叫做文本元素（如`span`,`strong`等元素），即`font-size`应用于文本元素时，元素的内容区即时`font-size`值，而我们知道，在没有任何其他因素的影响时，行内元素的内容区的高度行内框的高度，所以，又可以说`font-size`指示了没有设置`line-height`时，设置字体时基线间的距离（注意是设置字体元素时）
2.  `font-size`应用于替换元素  
    `font-size`应用于替换元素等，不会有任何影响，替换元素的高度等于自身的高度，不受`font-size`的影响。
3.  `font-size`应用于块级元素
4.  `font-size`并不会直接作用于块级元素，但也是有影响的，这要看块级元素的子元素是什么，因为`font-size`是有继承性的，当块级元素内直接包含文本时，该文本的大小会是块级元素所指定的`font-size`值；当块级元素包含的子元素为行内非替换元素时，该元素继承父元素的`font-size`值后，会应用于其内容中的文本，对其进行字体大小的设置；当块级元素包含的子元素为行内替换元素时，该元素虽然继承父元素的`font-size`值，但并不会收到任何影响。  
    综上，**不管是自身设置的，还是继承得来的`font-size`值，都只会对包含的文本内容产生影响**。

### `line-height` 和行内框 ###

关于`line-height`的基本要点如下：

*  应用范围：所有元素
 *  继承性： 有
 *  意义： 确定字体的大小

和`font-size`一样，应用于不同类型的元素时，`line-height`有不同的表现。

1.  `line-heigh`t应用于行内非替换元素时  
    **应用于非替换元素时，`line-height`属性是指文本行基线之间的距离**，行内框的高度此时等于`line-height`,可能低于`font-size`值，也可能高于font-size值，这是因为首先行内框的基础高度是内容框的高度，即font-size,但是当设置了line-height时，等于在内容框的基础上加上了行间距（line-height-font-size的值），行间距或正或负，分成两半分别应用于内容框上下，所以行内框的高度，也就是基线之间的距离可能大于内容框的高度，也可能小于内容框的高度，取决于line-height的值。
2.  `line-height`应用于替换元素时  
    `line-height`应用于替换元素时，不会对替换元素的高度产生影响，替换元素的高度还是本身的高度，**但是当替换元素的`vertical-align`是一个百分数时，替换元素的`line-height`值则有了用武之地。我们，当为`vertical-align`设置为百分数时，会把元素的基线相对于父元素的基线升高或降低指定的量（即该元素`line-height`值得指定百分比数），而当元素是替换元素时，则是把替换元素的底边相对于父元素的基线进行调整**。
3.  `line-height`应用于块级元素时  
    同`font-size`一样，当`line-height`应用于块级元素时，并不会直接对块级元素产生影响，而是会将`line-height`值应用于其中的文本，设置文本的行高，或者继承给其子元素（子元素可能是块级元素、行内非替换元素或替换原素）  
    可以说，假如一个元素时块级元素，即时设置了`line-height`值，那么其中文本基线间的距离也不一定是`line-height`，因为块级元素中不单只可能有文本，或行内非替换元素，还能能有行内替换元素，而行内替换元素的高度是不受`line-height`所控制的，所以说**在应用于块级元素时，`line-height`值定义了文本基线之间的最小距离**。