草珊瑚理解IFC(inline formatting context)
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-height
对line-box
高度的影响。
当子节点
line-height:normal;vertic-align:base-line;font-size:100px;
一致,而font-family
不同时
我们看到,第二个line-box比其他的高,因为第三个ba
使用了Catamaran字体。其content-area为164px,比其他字体高。当
line-height:200px;vertic-align:base-line;font-family:Catamaran;
一致,而font-size
不同时
我们看到这时line-box
被撑高起来了。
因为第二个Ba
为了与第一个Ba
进行基线对齐,第二个Ba
下沉了。当父元素的
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. 总结
- 文本之间的垂直对齐,靠
vertical-align
不靠谱。 - 垂直对齐,还是得靠
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)的更多相关文章
- Block formatting context & Inline formatting context(BFC&IFC)的区别(转载)
何为BFC与IFC bfc与ifc是针对页面正常流的两种环境,块级元素处于bfc环境中,行内元素处于ifc环境中. 元素是块级元素or行内元素由其display属性决定: block, table, ...
- 在网页布局中合理使用inline formating context(IFC)
引子:给大家出一个小小的考题,如何使用css来实现类似下面的在指定区域内,内容自适应的垂直居中.
- BFC(Box Formatting Context)的原理
BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...
- BFC --- Block Formatting Context --- 块级格式化上下文
虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...
- 关于各种Formatting context
Formatting context 我们把网页看作是由很多个盒子组成的,而这些盒子的展示方式,就是由display这个属性来决定的. 这里出现了一个概念,叫做Formatting context(格 ...
- 【转】关于Block Formatting Context--BFC和IE的hasLayout
转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...
- 关于Block Formatting Context--BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- 什么是BFC(Block Formatting Context)
原文:https://segmentfault.com/a/1190000012221820 https://www.w3.org/TR/CSS2/visuren.html#block-formatt ...
- 关于Block Formatting Context--BFC和IE的hasLayout(转)
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. ...
随机推荐
- 获取当前exe的路径
1.Assembly.GetExecutingAssembly().Location得到exe的全路径,Path.GetDirectoryName得到目录路径,不要用Directory.GetCurr ...
- 利用iOS中Safari浏览器创建伪Web App
在safari浏览器里有一个“添加到主屏幕”选项,我们可以用来创建伪Web App,下面来了解一下iOS中Safari的私有属性 第一步设置Web App的主屏幕图标: 有两种属性值apple-tou ...
- PNG文件格式详解
源文件地址:https://blog.mythsman.com/2015/12/08/1/ 最近在看隐写术的时候经常需要研究图片文件的二进制文档格式,那么这就很有必要了解我们的图片文件究竟是如何保存的 ...
- 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 ...
- 大数据学习路线之linux系统基础搭建
学习大数据是必须掌握一定Linux知识的,工欲善其事,必先利其器.在学习之前,首先需要搭建Linux系统,本节将讲解VMware Workstation的安装和CentOS 7系统的安装. 1.2.1 ...
- MFC超链接
最近写一个小的对话框程序时,想加一个文本超链接,研究了一下,发上自己的研究成果,供大家参考.下面说说完整的步骤. (假定静态文本ID为ID_STATIC) 首先,设置鼠标的形状及响应鼠标点击 第一步, ...
- Inception 模型
https://blog.csdn.net/xxiaozr/article/details/71481356 inception v1: 去除了最后的全连接层,使用全局平均池化层来代替,因为全连接层的 ...
- 关于js浅拷贝与深拷贝的理解
前端开发中,一般情况下,很少会去在意深拷贝与浅拷贝的关系. 大家知道,js变量有2种数据类型:基本类型和引用类型.基本类型的拷贝是将整个值完全拷贝一份的,也就是深拷贝.就是开辟了新的堆内存.所以基本类 ...
- 【题解】Luogu P2605 [ZJOI2010]基站选址
原题传送门:P2604 [ZJOI2010]基站选址 看一眼题目,变知道这题一定是dp 设f[i][j]表示在第i个村庄修建第j个基站且不考虑i+1~n个村庄的最小费用 可以得出f[i][j] = M ...
- collectd 检测cpu使用率
环境配置 1. install epel https://www.cyberciti.biz/faq/installing-rhel-epel-repo-on-centos-redhat-7-x/ 2 ...