深度解析CSS：字体度量，行高和垂直对齐

作者: 咕咚咚bells | 来源:发表于2017-02-07 14:55 被阅读57次

深度解析CSS：字体度量，行高和垂直对齐
学习CSS <2>
常用 css
hexo-hiero主题设置文字大小
day02
常用到的水平垂直居中样式布局
企业网站实战
css标签
「CSS」文本
CSS格式

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