《CSS世界》读书笔记（十五）

<!-- 《CSS世界》张鑫旭著 -->

字母x——CSS世界中隐匿的举足轻重的角色

在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都离不开最基本的基线（baseline）。例如，line-height 行高的定义就是两基线的间距，vertical-align 的默认值就是基线，其他中线顶线一类的定义也离不开基线。

基线的定义：字母 x 的下边缘（线）就是我们的基线。

x-height 指的是小写字母 x 的高度，术语描述就是基线和等分线（mean line）（也称作中线，meanline）之间的距离。

vertical-align: middle 这里 middle 的意思是基线往上 1/2 x-height 高度。我们可以理解为字母 x 交叉点那个位置。

由此可见，vertical-align: middle 并不是绝对的垂直居中对齐，我们平常看到的 middle 效果只是一种近似效果。原因很简单，因为不同的字体在行内盒子中的位置是不一样的，比如，“微软雅黑”就是一个字符下沉比较明显的字体，所有字符的位置都比其他字体要偏下一点儿。也就是说，“微软雅黑”字体的字母 x 的交叉点是在容器中分线的下面一点。

ex 是CSS 中的一个相对单位，指的是小写字母 x 的高度，没错，就是指 x-height。

假如图标高度就是1ex，同时背景图片居中，岂不是图标和文字天然垂直居中，而且完全不受字体和字号的影响？因为 ex 就是一个相对于字体和字号的单位。

.icon-arrow {
    display: inline-block;
    width: 20px;
    height: 1ex;
    background: url(arrow.png) no-repeat center;
}

示例见 http://demo.cssworld.cn/5/1-1.php

内联元素的基石 line-height

对于非替换元素的纯内联元素，其可视高度完全由 line-height 决定。

对于文本这样的纯内联元素，line-height 就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。比方说，line-height 设为 16px，则一行文字高度是 16px，两行就是 32px，三行就是 48px，所有浏览器渲染解析都是这个值，1像素不差。

line-height 的作用细节都是使用“行距”和“半行距”来解释的。

在 CSS 中，“行距”分散在当前文字的上方和下方。一般业界的共识是：行距 = 行高 - em-box。转换成 CSS 语言就是：行距 = line-height - font-size。

em-box 是 CSS 世界中比较虚的一个概念，我们无法有效感知这个盒子具体的位置在哪里，就是其高度正好是 1em。

有了“行距”，我们一分为二，就有了“半行距”，分别加在 em-box 上面和下面就构成了文字的完整高度了。

很多人把文字图形区域看成是 em-box 范围，实际上这是不正确的，比方说，一些带尾巴的英文字符 q 或者 g，其小尾巴是在 em-box 范围之外的，而对于汉字，很多字体图形高度实际上要小于 em-box 高度的。

内容区域可以近似理解为 Firefox/IE 浏览器下文本选中带背景色的区域。大多数场景下，内容区域和 em-box 是不一样的，内容区域高度受 font-family 和 font-size 双重影响，而 em-box 仅受 font-size 影响，通常内容区域高度更高一些。但是，当我们的字体是宋体时，内容区域和 em-box 是等同的，因为宋体是一种正统的印刷字体，方方正正。

假设 line-height 是1.5，font-size 大小是14px，那么我们的半行距大小就是：(14px * 1.5 - 14px) / 2 = 3.5px。border 以及 line-height 等传统 CSS 属性并没有小数像素的概念，因为这里的3.5px需要取整处理，如果标注的是文字上边距，则向上取整；如果是文字下边距，则向上取整，因为绝大多数的字体在内容区域中都是偏下的.

line-height 不可以影响替换元素。

.box {
    line-height: 256px;
}

<div class="box">
    <img src="1.jpg" height="218">
</div>

<div> 元素中，就一张图片，可是此时.box的高度却是256px，这并不是 line-height 把图片占据的高度变高了，而是把“幽灵空白节点”的高度变高了。

图片为内联元素，会构成一个“行框盒子”，在HTML5文档模式下，每一个“行框盒子”的前面都有一个宽度为0的“幽灵空白节点”，其内联特性表现和普通字符一模一样，所以这里的容器高度会等于 line-height 设置的属性值 256px。

对于块级元素，line-height 对其本身是没有任何作用的，我们平时改变line-height块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。