1. 认识字体font-family

字体渲染的实际高度,

由字体本身的设置(升部ascender,降部descender,大写字母高度Capital Height,小写字母高度X-Height等等)



用户定义的font-size

来决定。

所以同样的font-size,不同的font-family会产生不同高度的元素。

比如Catamaran字体,

em-square是1000个单位。

升部是1100,降部是540。

在Mac OS上的HHead Ascent/ Descent值,Windows上的Win Ascent/Descent值(这些值可能是不同的!)。

Capital Height(大写字母高度)是680,X height(小写字母高度)是485。

这说明font-faimly:100px的Catamaran字体,content-area(字体渲染后的实际占用像素)为164px。

大写字母是68px(680单位),小写字母(X字高)高49像素(485单位)。

2. 理解line-box

line-box的高度由

子节点的最高点



子节点的最低点

来决定。

具体来说line-box的高度由子节点的font-size,font-family,line-height,vertic-align决定。

3. 什么是line-height

line-height是指字体的行间距值,简称行高。

line-height所决定的区域如图所示。



注意:它不是基线之间的距离。

line-height:normal;时,行间距大小其实就是content-area大小。如下



line-height:1;时,行间距大小由font-size来决定。如下



这时行间距大小很可能跟content-area不同。

这样就导致行之间的文字可能会重叠。

下面两个场景展示了不同的line-heightline-box高度的影响。

  1. 当子节点line-height:normal;vertic-align:base-line;font-size:100px;一致,而font-family不同时



    我们看到,第二个line-box比其他的高,因为第三个ba使用了Catamaran字体。其content-area为164px,比其他字体高。

  2. line-height:200px;vertic-align:base-line;font-family:Catamaran;一致,而font-size不同时



    我们看到这时line-box被撑高起来了。

    因为第二个Ba为了与第一个Ba进行基线对齐,第二个Ba下沉了。

  3. 当父元素的font-family和子元素的font-family不同时

    比如下面代码

<style>
p {
line-height: 200px;
}
span {
font-family: Catamaran;
font-size: 100px;
}
</style>
<p>
<span>Ba</span>
</p>

的渲染效果



为什么会这样?

这是因为浏览器进行计算时,会以每行line-box的一个零宽度字符开始,这一规范称为strut。

零宽度字符的行间距大小,是以父元素为准。

所以这个p

4. 什么是vertical-align

vertic-align有四个值,其中

vertical-align:top/bottom对齐到父节点的line-box的顶部或底部

vertical-align:text-top /text-bottom对齐到自身的content-area的顶部或底部

如图



注意垂直对齐是以行间距区域开始。如图

5. 总结

  1. 文本之间的垂直对齐,靠vertical-align不靠谱。
  2. 垂直对齐,还是得靠font-size,font-family,line-height,vertic-align各种一致。

    且自己手工微调吧。

参考链接:

入理解CSS:font metrics, line-height 以及 vertical-align

Deep dive CSS: font metrics, line-height and vertical-align

草珊瑚理解IFC(inline formatting context)的更多相关文章

  1. Block formatting context & Inline formatting context(BFC&IFC)的区别(转载)

    何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...

  2. 在网页布局中合理使用inline formating context(IFC)

    引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.

  3. BFC(Box Formatting Context)的原理

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  4. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

  5. 关于各种Formatting context

    Formatting context 我们把网页看作是由很多个盒子组成的,而这些盒子的展示方式,就是由display这个属性来决定的. 这里出现了一个概念,叫做Formatting context(格 ...

  6. 【转】关于Block Formatting Context--BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  7. 关于Block Formatting Context--BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  8. 什么是BFC(Block Formatting Context)

    原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...

  9. 关于Block Formatting Context--BFC和IE的hasLayout(转)

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. ...

随机推荐

  1. 获取当前exe的路径

    1.Assembly.GetExecutingAssembly().Location得到exe的全路径,Path.GetDirectoryName得到目录路径,不要用Directory.GetCurr ...

  2. 利用iOS中Safari浏览器创建伪Web App

    在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...

  3. PNG文件格式详解

    源文件地址:https://blog.mythsman.com/2015/12/08/1/ 最近在看隐写术的时候经常需要研究图片文件的二进制文档格式,那么这就很有必要了解我们的图片文件究竟是如何保存的 ...

  4. make: *** /lib/modules/3.10.0-327.el7.x86_64/build: 没有那个文件或目录。 停止。

    1.问题: [root@localhost]# make make -C /lib/modules/-.el7.x86_64/build M=/home/csri/poc/adore modules ...

  5. 大数据学习路线之linux系统基础搭建

    学习大数据是必须掌握一定Linux知识的,工欲善其事,必先利其器.在学习之前,首先需要搭建Linux系统,本节将讲解VMware Workstation的安装和CentOS 7系统的安装. 1.2.1 ...

  6. MFC超链接

    最近写一个小的对话框程序时,想加一个文本超链接,研究了一下,发上自己的研究成果,供大家参考.下面说说完整的步骤. (假定静态文本ID为ID_STATIC) 首先,设置鼠标的形状及响应鼠标点击 第一步, ...

  7. Inception 模型

    https://blog.csdn.net/xxiaozr/article/details/71481356 inception v1: 去除了最后的全连接层,使用全局平均池化层来代替,因为全连接层的 ...

  8. 关于js浅拷贝与深拷贝的理解

    前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...

  9. 【题解】Luogu P2605 [ZJOI2010]基站选址

    原题传送门:P2604 [ZJOI2010]基站选址 看一眼题目,变知道这题一定是dp 设f[i][j]表示在第i个村庄修建第j个基站且不考虑i+1~n个村庄的最小费用 可以得出f[i][j] = M ...

  10. collectd 检测cpu使用率

    环境配置 1. install epel https://www.cyberciti.biz/faq/installing-rhel-epel-repo-on-centos-redhat-7-x/ 2 ...