css’ex’单位的值是多少?

前端之家收集整理的这篇文章主要介绍了css’ex’单位的值是多少?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
(不要与 Xunit流行的.Net单元测试库混淆。)

今天在无聊的适应我开始检查Gmails DOM(是的,我很无聊)。

一切看起来都很直接,直到我注意到一些有趣的规范的某些元素的宽度。杰出的Googlites使用罕见的“ex”单位指定了一些表格。

width: 22ex;

起初,我被困扰(“什么是前’?),然后它回到我:我似乎记住了从几年前,当我第一次学习CSS的东西。 From the CSS3 spec

[The ex unit is] equal to the used x-height of the 07002. The x-height is so called because it is often equal to the height of the lowercase “x”. However,an ‘ex’ is defined even for fonts that do not contain an “x”.

好和好。但我从来没有见过它使用过(更少使用它自己)。我使用ems相当普遍,并欣赏他们的价值,但为什么“前”?它看起来比em更不像标准的测量,远远没有用。

我发现讨论这个话题的少数几页是Stephen Poley的http://www.xs4all.nl/~sbpoley/webmatters/emex.html. Stephen表示好点,然而,他的讨论对我来说似乎没有结果。

所以我的问题是:’前’单位借给网页设计有什么价值?

(这个问题可以被标记为主观的,但我会离开这个决定给更经验的SO’ERS比自己。)

解决方法

当你想对与文本的小写字母的高度相关的东西进行大小调整时,它是有用的。例如,想象一个像这样的设计:

在设计的排版维度中,字母的高度与其余的元素具有重要的空间关系。上面的源图像中的线旨在帮助指出文本的x高度,但它们还显示了在围绕该文本设计时指南的位置。

正如Jonathan在评论中指出的,ex只是em的宽度版本(width)。

猜你在找的CSS相关文章