深入理解-CSS内联元素之line-height

深入理解-CSS内联元素之line-height

上一篇文章我们讨论了font-size,这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内联盒模型相关的东西,这里保持了与上一篇类似的结构,先来说说概念,然后是度量单位,最后来聊一个常见的内联元素的现象。

内联盒模型相关概念

说到盒模型,只要了解css的基本都知道这个概念,但说到内联盒模型可能很多人不是特别清楚。现在我们就来说说内联盒模型几个重要的概念。先看图概览一下,再逐项往下看。

深入理解-CSS内联元素之line-height

Tip: 图中用不同颜色的框标注了很多框,这些代表我们下面要说的不同的盒子或不同的概念。

inline-box

inline-box又名内联盒子,通常由一些标签包裹形成,最常用的如<span>标签包裹文字会形成内联盒子,那些没有标签包裹的文字默认自己形成一个盒子称为anonymous inline box匿名内联盒子。

line-box

line-box名为行框,从名字就可以看出,它是由单行内联元素形成的一个区域,注意是每一行都会形成,如果文字由五行,就会形成5个行框。行框的高度基本上是由行框中行高最大的内联盒子决定的。我使用基本上这个词,是因为还有其他情况,比如受到vertical-align属性的影响。

containing-box

container-box就是包含块的意思,在内联元素中,包含块是由行框组成的。说白了就是包裹在所有行框外面的那层盒子。

struct

这个词可能很多同学见的比较少,张鑫旭大神称之为”幽灵空白节点“,我们这里就用直译过来的词”支柱“。

在CSS规范中有这么一句话,Each line box starts with a zero-width inline box with the element's font an d line-height properties. We call that imaginary box a ”struct"。翻译过来意思就是每一个行框开始的位置都有一个宽度为0,并且行高和字体大小都与该元素相同的内联盒子。这个假想的内联盒子就被称为“支柱”。简单来说就是可以想象成行框前面有一个宽为0的空字符。

可能有的人会问,这个东西有什么用那?(⊙v⊙)嗯,用处大了去了,由于其几乎无处不在的特性并且由于宽度为0,我们平时在内联元素中遇到的很多奇怪的问题都是由“struct”引起的。我们暂时先放下这个,文章的最后我们再看这个东西引发的问题。

度量单位

这一部分说说行高的单位,我们不再列出所有的单位,因为这些完全可以从官方文档上看到,我们这里只说说重要的或者说容易错的部分。

默认值

line-height的默认值是什么,查下手册我们就能很容易的看到,它的值是normal,那么normal是多大?从我的理解来说,它的值受到font-family和浏览器的影响,IE/Firfox与chorme表现存在部分不一样的地方。但可以知道的是normal的初始值与字体的content-area的区域高度相同。不了解content-area的同学可以去看我的上一篇文章的line-height部分。这里简单说一下,inline水平的元素设置背景后,背景部分就是内容区域的部分,与初始line-height同高。

百分比、em和数值的区别

百分比和em与数值的区别在于继承性质上的不同,百分比和em被继承的是计算后的值,而数值类型的继承的是一种“计算规则”。

常见问题

这一部分我们来说一说常见的内联元素的一些问题。

display: inline-block元素间的空隙

这个问题,大家都遇到过,大家可以看看我做的实例的第一部分。首先我们会看到元素和元素之间的一定的间隙。这个间隙会引发的问题有,如果我们设置两个display: inline-block的元素宽度为width: 50%都向右或向左浮动,但是确无法排在一行的情况。这就是由于多出了这一点间隙,导致容器宽度不足,最后容器一行无法放不下两个宽度都为容器一半宽度的元素。

有人可能觉得这些元素间的间隙比较奇怪,但这是一种正常现象,因为内联元素本来的排版就应该有间隙,你能够想象文字和文字之间没有间隙的情况吗?内联元素之间本来就应该独立分开。怎么解决这个问题,网上也有很多答案,这里只简单提一下,因为我们主要说的是原理嘛。通过设置font-size为0,或者使用letter-spacing属性,都可以达到去除内联元素之间的间隙的目的。

在我实例第一部分中应该很多人也注意到,在父容器的最底端也有一个空隙,这个到底是什么那?还记得我上面概念中提到的struct吗,这种现象就是由这个东西引起的,由于其不可见,所有我们用一个内联元素x来代替。这里可以看实例的第二部分。这个现象的原因是由于内联元素是默认vertical-align元素对齐的,而我们的内联元素的基线是默认为元素的底边缘,sturct元素又有自己的行高,当它的基线与我们的内联元素对齐时,它的行高会撑起一部分距离,就出现了实例中的现象。

知道了原因,我们解决起来也很简单。只要struct元素的行号为0就可以了,所有我们可以设置父元素的line-height: 0或者通过设置font-size: 0来间接设置line-height为0。可能已经有人法相,font-size: 0可以同时解决元素间的间隙和底部的间隙,所以我更喜欢用这个方法。

下面我们做一下其他的操作,我们在实例第三部分中,前面三个inline-block元素中加上文字,发现元素都往下移动了,这又是什么原理那。这其中就涉及到了vertical-align属性的一些性质,我们下一篇就来讲讲vertical-align,并且来说说这种现象的原因。

文章中如有错误的地方,或者您有更好的建议欢迎指正~,原文链接

相关推荐