[toc] ## font-size和line-height和vetical-align `line-height`的**数值**属性值**和百分比**值属性值都是**相对**于`font-size`计算的 而`vertical-align`的**百分比**值属性值又是**相对**于`line-height`计算的。 ## font-size值 ### ex >font-size越大，ex越大 在字母X一节中已经详细说过，ex就是字母x的高度(font-size一般会大于ex，因为整个字母x是处于基线和中线之间的，是一个font-size的中间部位) 故常用来行内居中 ### em和rem >1em的计算值等同于当前元素所在的font-size计算值 em指一个字模的高度， 什么是字模的高度？其一般由`M`的**宽度**决定（宽高相同） 所以叫em(ex和x相关,em和m相关) 之所以是em，是因为英文26个字母中方方正正不算多，M是一个 So，方方正正的汉字，每一个都正好是一个em 160px宽度刚好能放10个16px的汉字 但160px的高度并不一定可以叠10个16px的汉字，因为line-height不一定等于1 >[danger] 需要注意的是如果我么将当前元素的font-size修改为xem，那么在当前元素设置其它属性值时如果也使用了em，那么这个1em的基准是我们修改后xem，而不再是1em > 比如下面这样，margin-left的计算结果会是1.2em，而不是0.6em ``` div{ font-size:2em; margin-left:0.6em; } ``` so，如果想要保持一致，推荐使用`rem`，统一根据html元素的font-size计算 但em并不是一无是处， 如果你想字号变大时，上下间距也变大，那么em可能更合适。 #### em与text-indent 从下面的示例中我们可以发现，一个字母的宽度并**不一定**等于**1 font-size**  ## 625% font-size:62.5% 计算值为 `16px*0.625=10px`，但是在chrome（中文版）下低于12px会强制为14px，故可提升10倍进行计算基准(100px)。 ## font-size:0 虽然低于12px会被强制为14px，但为0时是会隐藏文字的。