七夕约会-带你读懂行内元素

约会准备：专业术语

首先，我们先得掌握几个专业术语，这会帮助我们深入了解行内元素。

• 匿名文本：指所有未包含在行内元素中的字符串。如：

<p>hello<em>world</em></p>

• em框：也称为字符框 。如下图所示，我们设置font-size实际上是在给em框提供大小，实际显示的字符大小并不一定是这个大小。

• 内容区：在非替换元素中，内容区可能有两种，可以是元素中各字符的em框串在一起构成的框，也可以是由元素中字符自行描述的框。在替换元素中，内容区就是元素固有高度加上可能有的内外边距或边框。
• 行间距：line-height和font-size值之差。
• 行内框：对于非替换元素，该值刚好是line-height（不设置内边距时）；对于替换元素，该值是内容区高度。
• 行框：包含在一行中出现的行内框的最高点与最低点的最小框。换句话说，就是行框上边位于最高行内框的上边界，而行框底边位于最低行内框的下边界。

开始约会-非替换元素+替换元素

非替换元素

建立框

首先，对于行内非替换元素或匿名文本的某一部分，font-size确定了内容区的高度。

 接下来根据line-height得到行内框。

• 当line-height<font-size时，行内框小于内容区
• 当line-height>font-size时，行内框大于内容区

垂直对齐

如果改变行内框的垂直对齐，即设置元素的vertical-align属性，这会导致其内容区与行内框的提升或下降，从而影响到行框的高度。

例子：

结果如下： 

 

 如果不清楚tall为什么会提升到跟strong顶端一样的位置，可以对vertical属性进行了解。

基线与行高

各行框的具体高度取决于其组成元素相互之间如何对齐，这种对齐往往很大程度上依赖于基线落在各元素（或匿名文本各部分）中的哪个位置。因为这个位置确定了行内框如何摆放。

改变一个行内元素的line-height可能会导致文本行相互重叠，在所有情况下，这种修改都是针对单个元素的，但可能影响行框高度。

缩放行高

设置line-height的最好方法就是使用一个原始数字值，因为这个数值会成为缩放因子，而该因子是一个继承值而非计算值。这样做的好处，就是为子元素设置或不设置font-size时，该继承值都能够灵活调整行高。

比如：

如果不希望子元素继承父元素line-height，我们可以为子元素设置line-height以覆盖继承的缩放因子。

增加框属性

行内元素的边框边界由font-size而不是line-height控制，内边距可以把边框从文本本身拉开，但它并不会改变内容区具体形状，只影响行内框的高度，但不改变行高。

 

如上图所示，line-height不会因为加入内边距而改变，但是行内框高度会。 

 我们来看一种一种情况：

这种情况是由于元素内边距过大导致行背景重叠，不明白原因的可以看专业术语中行高的定义。

替换元素

一般认为行内替换元素（如图像）有固有的高度和宽度。所以替换元素的行内框会用元素整体（包括内容、外边距和内边距）来定义。

替换元素的line-height对图像的行内框没有任何影响，其行内框和其内容区一样。

那line-height在替换元素中有什么用处呢？

我们这个时候就该想到垂直对齐了，在该属性中，图像本身的高度无关紧要，关键是line-height的值。

增加框属性

内边距和边框会影响到行框的高度，因为他们要作为行内替换元素的行内框的一部分。所以当我们为其增加内边距、边框会增大其行内框。

如果以上有任何错误的地方还请评论区指正，谢谢~

参考书籍：《CSS权威指南》