深度解析CSS:字体度量,行高和垂直对齐

line-heightvertical-align是简单的CSS属性。 它看起来很简单,我们大多数人都相信完全理解了它们是如何工作的以及如何使用它们。 但事实并非如此, 他们真的是很复杂的,也许是最难的,因为他们在创建CSS的一个不为人所知的特性:内联格式化上下文中有一个重要的作用。
例如,line-height可以设置为长度或无单位值1,默认值为normal。 OK,但是什么是normal呢? 我们经常读到它或许是1,或者也可能是1.2,即使CSS规范叙述的也不是很清楚。 我们知道无单位行高是相对于字体大小来说的,但问题是font-size:100px在不同的font-family中表现是不同,因此行高是否总是相同的或不同的? 是真的在11.2之间吗? vertical-alignline-height的影响又是什么?
一起深入了解一个不那么简单的CSS机制...

先谈一谈font-size

<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>
p  { 
      font-size: 100px;
      background: tan;
}
.a { 
      font-family: Helvetica;
      background: #888;
  }
.b { 
       font-family: Courier New;
       background: #888;
}
.c { 
      font-family: Catamaran;
      background: #888;
}
不同的字体,相同的字体大小,显示了不同的高度

我们发现了font-size:100px不创建100px高度的元素? 我测量并发现这些值:Helvetica:115px,Courier New:114px和Catamaran:140px

推荐阅读更多精彩内容

  • 深入理解傅里叶变换Mar 12, 2017 这原本是我在知乎上对傅立叶变换、拉普拉斯变换、Z变换的联系?为什么要进...
    价值趋势技术派阅读 2,588评论 2 2
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 8,379评论 1 84
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 613评论 0 2
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 1,031评论 0 7
  • 我从一毕业就分配到二幼工作已有二十余年。回想这二十余年,我从一名配班老师到班主任、教研组长、团支部书记、保教主任、...
    方海敏阅读 288评论 28 29