IFC：inline formatting content，格式化上下文
font-size
什么是font-size，我们可用先看两张图
em-square
em-square
font-size其实就是em-square,说实话还是不理解。
再带上一个疑问：我们平时写代码的时候会遇见p元素里面的每个span元素font-size是一样的，但是p元素的高度却比font-size的高度要高，带着这个疑问，我们开始下面的代码举例分析
先把第一个span标签单独拎出来，截图以后高度显示是159px;
159px.png
再把第二个span标签拎出来，截图以后高度的163px;
163px.png
分别截图的两张图放在Windows里的画板里（Mac可用sketch软件），因为内联元素的baseline对齐的（图中黑线处），两个span顶部是一样的，底部第二个span比较长，所以就用第二个span的，所以最终结果的p标签的高度则是163px。
对齐以后的.png
现在我们明白了刚开始疑问了，p元素比span子元素的font-size大，是因为内联元素和内联元素默认用baseline对齐，最高和最低点的高度把p元素撑的那么大了。
line-height
line-height是决定内联元素真实占地高度。
为了显示效果，重新选了两个字体，给p标签line-height:100px。
100px.png
我们发现，在给了line-height:100px以后，span标签字体的高度已经超过了父元素p的高度了，接着我们给p标签line-height:200px（也可换成倍数line-height:2）；慢慢的缩小直至可用把span标签包含即可。在缩小过程中我们可以发现如果line-height比font-size大，会自动居中。
如果不写line-height，那么就是normal，是这个字体设计师指定的 ，范围在0.618~3.378之间。
现在如果遇到子元素比父元素大，父元素包不住。有以下两种方法1.可用给大一点的line-height；2.给overflow：hidden；超出的就隐藏了，但是会有隐藏的问题，不推荐。
vertical-align;
vertical-align:top;对齐方式把一个span的实际占地面积的顶部去跟别人对齐。同上，分别把两个span标签分别截图并且拼凑。
top1.png
top2.png
合并.png
最终.png
结果可用看到，两个span的顶部对齐形成的，但是和谁的顶部对齐，其实是和p元素默认的字体对齐(我们可用在前面加个x元素)。字体选取的不够夸张，实际上对齐以后视觉效果字体是不对齐的。
x默认元素.png
vertical-align还有middle/bottom/text-bottom等等属性，这里就不一一列举了，其中middle的对齐方式用父元素 baseline 高度加上父元素中 x-height 的一半的高度来对齐当前元素的垂直方向的中点。这个对齐以后的结果并没有实现居中对齐，不靠谱。
说了这么多，来个结论
1.font-size是em-square，是看不见的框框，红色框border不是由font-size决定的，而是由设计师推荐的行高决定的。
2.line-height 是决定内联元素的高度的。
3.vertical-align不靠谱。
网友评论