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. flask 对URL进行安全验证

    对URL进行安全验证 虽然我们已经实现了重定向会上一个页面的功能,但是安全问题不容忽视,鉴于referer和next容易被串篡改的特性,我们需要对这些值进行验证,否则会形成开放重定向漏洞   以URL ...

  2. ubuntu16.04 无法连接wifi和校园宽带问题的解决办法

    我遇到的问题是在ubuntu16.04系统下无法进行上海大学校园宽带连接或者校园wifi连接,我一个一个来解决这两个问题. 1.无法连接校园宽带的问题:输入校园账号和密码后,宽带始终连接不上.(上海大 ...

  3. Vue中的事件与常见的问题处理

    Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...

  4. [WCF REST] 一个简单的REST服务实例

    Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...

  5. 纯手写SpringMVC到SpringBoot框架项目实战

    引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...

  6. build custom centos7

    必读,在以下内容之前. pre: 0. install log redhat6 mak iso guide redhat7 make iso guide 1. Linux安装>(三)发行版制作 ...

  7. kali linux 2.0配置更新源后apt-get update 报错

    这个是我/etc/apt/sources.list的更新源: deb http://http.kali.org/kali kali-rolling main contrib non-free deb ...

  8. SVN Attempted to lock an already-locked dir异常解决方法

    Attempted to lock an already-locked dir异常解决方法 eclipse或myeclipse用svn提交的时候报错: Attempted to lock an alr ...

  9. 20145320《WEB基础实践》

    20145320WEB基础实践 实验问题回答 1.什么是表单 表单可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码 ...

  10. Oracle错误——SP2-0734: 未知的命令开头 "imp C##sin..." - 忽略了剩余的行。

    错误 在windows的DOS窗口下使用命令导入Oracle数据. 原因 进入sqlplus里是不能执行imp的(sqlplus不认识imp),imp 是个工具,应该在cmd的dos命令提示符下执行.