草珊瑚理解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)直译为“块级格式化范围”. ...
随机推荐
- flask 对URL进行安全验证
对URL进行安全验证 虽然我们已经实现了重定向会上一个页面的功能,但是安全问题不容忽视,鉴于referer和next容易被串篡改的特性,我们需要对这些值进行验证,否则会形成开放重定向漏洞 以URL ...
- ubuntu16.04 无法连接wifi和校园宽带问题的解决办法
我遇到的问题是在ubuntu16.04系统下无法进行上海大学校园宽带连接或者校园wifi连接,我一个一个来解决这两个问题. 1.无法连接校园宽带的问题:输入校园账号和密码后,宽带始终连接不上.(上海大 ...
- Vue中的事件与常见的问题处理
Vue的事件:获取事件对象$event: 事件冒泡:事件会向上传播 原生js阻止事件冒泡,需要先获取事件对象,再调用stopPropagation()方法: vue事件修饰符stop,例@clik.s ...
- [WCF REST] 一个简单的REST服务实例
Get:http://www.cnblogs.com/artech/archive/2012/02/04/wcf-rest-sample.html [01] 一个简单的REST服务实例 [02] We ...
- 纯手写SpringMVC到SpringBoot框架项目实战
引言 Spring Boot其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 通过这种方式,springboot ...
- build custom centos7
必读,在以下内容之前. pre: 0. install log redhat6 mak iso guide redhat7 make iso guide 1. Linux安装>(三)发行版制作 ...
- kali linux 2.0配置更新源后apt-get update 报错
这个是我/etc/apt/sources.list的更新源: deb http://http.kali.org/kali kali-rolling main contrib non-free deb ...
- SVN Attempted to lock an already-locked dir异常解决方法
Attempted to lock an already-locked dir异常解决方法 eclipse或myeclipse用svn提交的时候报错: Attempted to lock an alr ...
- 20145320《WEB基础实践》
20145320WEB基础实践 实验问题回答 1.什么是表单 表单可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁. 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码 ...
- Oracle错误——SP2-0734: 未知的命令开头 "imp C##sin..." - 忽略了剩余的行。
错误 在windows的DOS窗口下使用命令导入Oracle数据. 原因 进入sqlplus里是不能执行imp的(sqlplus不认识imp),imp 是个工具,应该在cmd的dos命令提示符下执行.