摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。
在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字体，掌握相关概念。
技术是以目的为导向的，那么先来抛出一个问题，前端开发中我们使用font-size来设置文字的大小，但检查元素后发现内联元素的高好像大多数时间并不是我们设置的font-size大小，这是为什么哪？
这里面涉及到浏览器的影响，字体的设计等方面的知识。尤其是字体设计是一门高深的学问，而我们只是为了开发网页中控制文字大小和对齐，所以这里我们只取我们需要的部分，下面先介绍字体概念。
字体相关概念我们先来了解文字的各个概念。图看起来更直观，所以我简单画了个图。
基线对照着图，可以看出基线是位于字母x下方的那条线，所有字符都基于这条线进行定位。这应该大家比较常见，毕竟vertical-align的默认值就是baseline，指的就是这条线。
em-boxem-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-heightx-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则是相对于根元素的字体大小进行计算。
其他应用 神奇的font-size: 0font-size: 0这种写法很常用，在以前的Chrome中会限制font-size小于12px并且大于0的时候按照12px计算，但我最近在最新版的Version 65.0.3325.181 (Official Build) (64-bit)Chorme下测试，发现已经没有这个限制了（不知道什么时候修改掉的-_-）。使用font-size: 0让字体大小变为0，通常也会使得line-hight变为0，这经常可以解决line-block元素出现的空隙问题，这个问题具体的原因我们后面再说。
看了很多文章最后总结和整理了这些，下一篇介绍line-height说说line-height在内联元素中的作用。在这篇文章中如有错误或我与大家理解不一致的地方，欢迎指出，感谢~。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113084.html
摘要：内联盒子的高度由决定，限制包含盒子的高度，两者一致，即把内联盒子安放在包含盒子内，排除其他外界干扰。这时候由内联盒子模型可知，行间距是等分的，中间部分是，达到看似居中的效果。可以得到结论和设置一致，并非是完全垂直，除非为。 张鑫旭的CSS深入理解之line-height学习笔记 line-height的定义 行高：两行文字基线之间的距离 为何是基线：基线是定义所有字线的根本 不同字体...
摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。 在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...
摘要：给一个内联元素设置背景，这背景所占的区域就可以看成内容区域。看了很多文章最后总结和整理了这些，下一篇介绍说说在内联元素中的作用。 在前端开发中，似乎控制不同大小文字之间，或者文字与图标之间对齐总是不那么得心应手，总觉得少了点什么，这其中其实跟CSS中几种跟内联元素相关的属性有很大的关系，从我的感觉看，平时遇到的30%的css问题都是由于搞不清这几种属性的关系有关。这里第一篇文章先介绍字...
摘要：但实质上，只要是内联元素，这两个元素都会同时在起作用。而解决方案可以有以下几种元素不使用基线对齐，可以改为对齐元素块状化设置为设置为总结讲解了的各类属性值及其效果起作用的前提是内联元素与都是同时作用在内联元素上的 前言 vertical-align用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。也就是说，对于块级元素，vertical-align...
摘要：常见问题这一部分我们来说一说常见的内联元素的一些问题。通过设置为，或者使用属性，都可以达到去除内联元素之间的间隙的目的。 showImg(https://segmentfault.com/img/remote/1460000014515131?w=1280&h=608); 上一篇文章我们讨论了font-size，这一篇来说另一个与文字关系密切的属性line-height。这里涉及到了内...
阅读 2194·2021-11-24 10:31
阅读 3254·2021-11-23 09:51
阅读 2068·2021-11-15 18:11
阅读 2180·2021-09-02 15:15
阅读 2342·2019-08-29 17:02
阅读 2166·2019-08-29 15:04
阅读 725·2019-08-29 12:27
阅读 2700·2019-08-28 18:15
