&nbs p;
@L_ 126 _0@世界中扮演了一个 重要 的角色。有人可能的第一反应是：“我 知道 ，可以模拟关闭按钮的那个叉叉效果！”
这位 同学 思维 很活跃，但是呢，本文所要介绍的字母 'x' 和CSS的关系不是奇巧淫技，而是正统的 术 语上的紧密联系。
二、字母& # 8217;x’与CSS中的基线
在各种内联相关模型中，凡是涉及到垂直 方向 的排版 或者 对齐的，都离不开最最基本的基线( baseline )。例如， line-h ei ght 行高的定义就是两基线的间距； vert ical -align 的默认值就是基线；其他中线顶线一类的定义也离不开基线；基线甚至衍生出了：
“alphabetic” baseline: “字母”基线 – 英文 “han gin g” baseline: “悬挂”基线 – 印度文 “ideographic” baseline: “表意”基线 – 中文
那大家知道基线又是如何定义的吗？
哈，基线的定义就离不开本文的男主角 'x' .
字母x的下边缘(线)就是我们的基线。
对，是字母 x , 不是字母 s 之类下面有尾巴的字母。
三、字母’x’与CSS中的x-height
字母 'x' 与CSS的故事远不止基线这么 简单 。CSS中有一个概念叫做 "x-height" , 指的是字母 'x' 的高度。
有人可能会疑问了，“一个字母的高度跟我CSS布局排版有 半 毛钱关系啊？”
实际上关系可大了。
首先，需要 了解 下 "x-height" 的含义，通俗讲， "x-height" 就是指的小写字母 'x' 的高度；术语描述就是基线和等分线[mean line](也称作中线[midline])之间的 距离 。
维基上有这么个示意图：
"x-height" 的示意范围一目了然，了然于心，于心不忍，不忍直视。
上面图中还出现了其他的名词，这里简单说下我的理解：
ascender height: 上下线高度 cap height: 大写字母高度 median: 中线 descender height: 下行线高度然后，CSS中有些属性值的定义就和这个 "x-height" 的有关，最典型的代表就是： vertical-align: middle .
这里的 middle 是中间的 意思 ，注意，跟上面的 median 中线不是一个意思。规范中对垂直对齐的 middle 这么解释的：
middle: This identifies a baseline t hat is offset From the alphabetic baseline in the shift-direction by 1/2 the value of the x-height font characteristic. The pos IT ion of this baseline may be o BT ai ned f rom the font data or, for fonts that have a font characteristic for “x-height”, it may be computed using 1/2 the “x-height”. Lacking either of these pieces of information, the position of this baseline may be ap PR oxi MATE d by the “central” baseline.
大意就是： middle 指的是基线往上1/2 "x-height" 高度。我们可以近似脑补成字母 x 交叉点那个位置。
有此可见， vertical-align: middle 并不是绝对的垂直 居中对齐 ，我们平常看到的 middle 效果只是一种近似的效果。 原因 很简单，因为不同的字体，其在行内 盒子 中的位置是不一样的，比方说’ 微软雅黑 ’就是一个字符下沉比较明显的字体，所有字符的位置相比其他字体要偏下 一点 。要是 vertical-align: middle 是相对容器中分线对齐，呵呵，你会发现图标和文字不在一条线上，而相对于字符 x 的中心位置对齐，我们肉眼看上去就好像和 文字居中 对齐了。
四、字母’x’与CSS中ex
字母 'x' 衍生出了 "x-height" 概念，并在这个基础上深耕细作，进一步衍生出了 ex , 注意，这里的 ex 不是前任的意思，而是地地道道CSS中的一个 尺寸 单位。
大家可能都听过用过 em , px 甚至用过 rem , 说不定对连IE6都老早支持的 ex 单位却很陌生。
ex 是CSS中的一个相对单位，指的的是小写字母 x 的高度，没错，就是指 "x-height" .
那这个单位有什么实际 用途 呢？我只能呵呵，貌似没啥实际用途，否则也不会这么不为人所知。
是这样吗？
五、单位ex的 价值 与实用性
存在必有价值。我们细细思考字母 "x" 在CSS世界中扮演的角色，就会发现 ex 的价值所在。
首先，需要 明确 一点，虽然说尺寸单位的作用是限定元素的尺寸，但是，由于字母 "x" 受字体和环境影响大，参考性太低，因此 ex 显然不太适合做这个。那问题来了， ex 连自己的本职工作都做不好，难道还指望其副业开挂？
没错， ex 的价值就在其副业上——不受字体 字号 影响的内联元素的垂直居中对齐效果。
我们都知道，内联元素默认是基线对齐的，而基线就是 x 的底部，而 1ex 就是一个 x 的高度。设想下，假如我们图标高度就是 1ex , 同时背景图片居中，岂不是图标和文字天然垂直居中，而且，完全不受字体和字号的影响。因为 ex 就是一个相对于字体字号的单位。
文字表述苍白，我们看个例子，下图所示的文字后面跟个小三角图标的效果是非常常见的：
现在，要让该图标和文字中间位置排整齐，你是如何实现？
尺寸啪啪，然后 vertical-align: middle ?
这样虽然也有效果，但是，实际上啰嗦了，借助 ex 单位，我们直接借助默认的 baseline 对齐就可以实现我们的效果！
如下CSS代码：
.icon-arrow { dis play : inline-block; width: 20px; height: 1ex ; background: url(arrow.png) no-re PE at center ; } 然后就华丽丽地对齐了，完全没有 vertical-align 出场的 机会 。
您可以狠狠地点击这里：ex高度图标和字符天然对齐Demo
会发现，字体， 文字大小 全变化，对齐依旧良好：
虽然使用 ex 做高度实现天然垂直对齐看上去很巧妙，但是，也是有局限的，就是如果图标背景的高度超过 1ex ，我们就只能再请 vertical-align 出马了……
对了，还有一点。由于IE6 -i E7对内联模型的解释有问题，因此，各类 vertical-align 在这些浏览器下都是有问题，包括这里的 ex 天然基线对齐，需要特别处理下。
六、结束语
外面的雨哗啦啦的下了一整天，我的钓鱼大计啊，就此泡汤。
要是现在在老家就好了，沟沟渠渠里一定都是从鱼塘跑出来的鱼，下水摸鱼捕鱼不知有多快活。
不过 话说，这阴雨天适合钓鲶鱼，要不待会儿冒雨出去碰碰运气？
话说本文的 id 是4848, 有些不吉利啊。不过反而来讲，可能是对鱼儿说的！
有道理，写完就去钓会儿鱼，我有大头，下雨不愁！
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-字母’x’在CSS世界中的角色和故事 全部内容，希望文章能够帮你解决 html5教程-字母’x’在CSS世界中的角色和故事 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-字母’x’在CSS世界中的角色和故事的详细内容...