在前端开发中, 似乎控制不同大小文字之间, 或者文字与图标之间对齐总是不那么得心应手, 总觉得少了点什么, 这其中其实跟 CSS 中几种跟内联元素相关的属性有很大的关系, 从我的感觉看, 平时遇到的 30% 的 css 问题都是由于搞不清这几种属性的关系有关. 这里第一篇文章先介绍字体, 掌握相关概念.
技术是以目的为导向的, 那么先来抛出一个问题, 前端开发中我们使用 font-size 来设置文字的大小, 但检查元素后发现内联元素的高好像大多数时间并不是我们设置的 font-size 大小, 这是为什么哪?
这里面涉及到浏览器的影响, 字体的设计等方面的知识. 尤其是字体设计是一门高深的学问, 而我们只是为了开发网页中控制文字大小和对齐, 所以这里我们只取我们需要的部分, 下面先介绍字体概念.
字体相关概念
我们先来了解文字的各个概念. 图看起来更直观, 所以我简单画了个图.
基线
对照着图, 可以看出基线是位于字母 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 的关系, 说说到底怎么才能真正让内联元素对齐. 在这篇文章中如有错误或我与大家理解不一致的地方, 欢迎指出, 感谢~. 原文链接 https://github.com/xwchris/blog/issues/13
来源: https://juejin.im/post/5ad71a936fb9a028df232838