border属性实现等高布局：通过border-left的宽度，预留左侧内容，子元素通过负margin定位，能简单的实现等高
字母x所决定的位置：
* 基线：字母x的下边缘，就是baseline
* ex：小写字母x的高度
* vertical-align：middle所指的位置，就是基线往上1/2 x-height高度，可以近似理解为字母x交叉点的位置
ex的用处：内联元素默认是基于baseline对齐的，baseline就是x的底部，而1ex就是一个ex的高度。当图标高度就是1ex，同时背景图片居中，就是图标
对于非替换元素的纯内联元素，其可视高度完全由line-height决定，padding、border属性对可视高度是没有任何影响的。line-height = font-size + 行距
内联元素的高度由固定高度和不固定高度组成，不固定高度就是行距
* embox：由font-size决定
* 内容区：文字实际展示的高度，对于宋体，embox等于内容区，而对于其他字体，可能存在内容区超出embox的情况，比如英文字符q或者g的小尾巴是在embox之外
当字体为总体时，embox = 内容区
embox就是font-size，内容区就是实际看到的文字，由于字体问题，实际看到的文字可能超出embox，视觉上也就是行高不是两边均分的现象
替换元素高度不受line-height影响。当可替换元素和行内元素在一行时，line-height的作用是决定这个行盒的最小高度。