关于基线baseline及与inline-block、vertical-aline等属性的关系（完善中.......）

1. 基本含义

基线（base line）：而是英文字母x的下端沿，是a,c,z,x等字母的底边线，并不是汉字文字的下端沿，。下图的红色线即为基线。凡是涉及到垂直方向的排版或者对齐的，都离不开最最基本的基线

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

mean line：等分线，也叫中线

• ascender height: 上下线高度
• cap height: 大写字母高度
• median: 中线
• descender height: 下行线高度

基线作用很重要，是竖直方向对齐的关键，vertical-aline，inline-block这些都是根据他来排版定位的

 

 

2.一些小技巧

x-height：也就是 ex ，他是一个字母 x 的高度，她也是基本的度量单位，3ex 就是3倍x的高度，.ex是CSS中的一个相对单位。

（1）对于高度小于1ex的图片，如果想让他相对于一行文字居中时。因为图片也是行内元素，所以可以不换行和文字一起显示。内联元素默认是基线对齐的，图标高度就是1ex背景图片居中，图片和文字天然垂直居中，完全不受字体和字号的影响。

这个，如果是一段字，跟着一张img，img 高度定为1ex。那当字体变化时，图片大小不变，但是字体大小变化，所以16号字体会居中，如果25号字体图片就不会居中，图片的大小不变的。

如果是用背景图，下述代码即可

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