在前端开发中,似乎控制不同大小文字之间,或者文字与图标之间对齐总是不那么得心应手,总觉得少了点什么,这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系,从我的感觉看,平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字体,掌握相关概念。
字体相关概念
网页生来就是为了展示内容,文字是其中及其重要的一部分。在css中很多的属性都和文字有关,为了接下来说明其他文字先关的属性,我们先来了解文字的各个概念。先上图
基线
对照着图,可以看出基线是位于字母x
下方的那条线,所有字符都基于这条线进行定位。这应该大家比较常见,毕竟vertical-align
的默认值就是baseline
,指的就是这条线。
em-box
em-box
可能比较少见,但大家一定知道单位em
。1em
跟该元素的font-size
大小相同。还是以图为例如果设置font-size: 20px
,那么em-box
的高度就为20px
。
content-area
这是一个很重要的概念,content-area
翻译成中文是内容区域,这里图中没有标出,因为通常默认情况下,content-area
与line-height
是一样高的。给一个内联元素设置背景,这背景所占的区域就可以看成内容区域。
大多数情况下content-area
于em-box
的高度不同,conent-area
的高度受到font-family
和font-size
的影响,有时候即使font-size
一致可能以为字体不同导致content-area
也不一样,这是在字体设计的时候就决定了的。而em-box
只受font-size
影响。这也就解释了为什么我们有时候检查元素看到的高度与实际字体设置大小不一样的问题。
半行距
先看行距怎么算,行距 = line-height - font-size
。半行距就是将行距一分为二,一份加在em-box
的上面,一份加在下面,就构成了完整的文字高度。
x-height
x-height
顾名思义就是x
字符高度的意思,1ex
就是x-height
的值,通常没什么作用,但是对于我们理解概念有很大帮助,css中vertical-align: middle
的解释就是Aligns the middle of the element with the baseline plus half the x-height of the parent,意思就是将该元素的中心点与父元素基线加上x-height
高度的一半对齐。
这句话里有几个关键的部分一定要弄明白该元素的中心点
、父元素的基线
和基线加上x-height高度的一半
,我们常常使用veritcal-align: middle
出错,往往就是这几个点没有搞清楚,这里先试着理解,以后的文章会详细说明。
以下部分是介绍字体单位和一些理解,如果已经了解可以直接跳过,别浪费时间,时间宝贵~
度量单位
字体的大小在css中用font-size
来表示,它的度量单位有很多,主要分为三大类:关键词类型、数值类型、百分比类型。
关键词类型
关键词类型分为绝对尺寸和相对尺寸。由于使用的较少,不必记忆,所以这里仅仅罗列出来。
绝对尺寸:xx-small
、x-small
、small
、medium
、large
、x-large
、xx-large
相对类型:smaller
、larger
数值类型
数值类型在平时使用较多,而数值类型的单位常用的有px
、em
和rem
,可能偶尔会用到ex
其他基本用不到,不再列举。px
表示像素,em
相对于父元素的字体进行计算,rem
相对于根元素<html>
的字体大小进行计算
百分比类型
使用百分比来表示字体大小,它是相对于父元素的字体大小进行计算。如font-size: 200%
2em
与200%
的区别在于继承上,百分比会将其计算好的值继承下去,而2em
相当于继承的计算规则,这个用的会多一些。
花了这么久终于写完了,下一篇介绍line-height
、veritial-align
和font-size
的关系,说说到底怎么才能真正让内联元素对齐。在这篇文章中如有错误或我与大家理解不一致的地方,欢迎指出,感谢~。