CSS深入浅出-IFC

IFC(inline formatting content)内联格式化上下文，也是BFC的兄弟。

详情链接:深入理解 CSS：字体度量、line-height 和 vertical-align

font-size是什么

• font-size:100px

不是指里面字的大小，也不是字的高度

• 活体印刷

font-size是指那个模具的高度，也就是活体印刷块的高度
所以有的字体是可以比font-size大的

• fontsize就是em-square

每一个字体的英文字符都要定义很多东西。
如果字体里面的部分相对于em-square超出的话，就叫出血(bleed outside)

line-height是(规定了)什么

每个字体都有一个默认的，字体设计师推荐的行高，设计师可以随意添加

• line-height的意义

1. 让里面的字体自动居中显示
2. line-height决定一个内联元素的真实占位(真实占行高度)

• 内联元素对齐方式

内联元素是默认用基线(Baseline)对齐的，因为这样好看

• 多个font-size高度问题

1. 字体不一样，基线也不一样
2. 当两个inline元素的字体不一样时，会使他们的父元素变高
   因为两个字体基线不一样，而一行又是已基线对齐的，所以会多几像素

vertical-align属性(少用)

• vertical-align:top

所谓的top就是把字体的实际占地高度与父级元素默认字体的顶端对齐
所以大部分情况这个元素没用

• vertical-align:middle

不是居中对齐，也没用

图片下面为什么有空隙

• 原因

<img>也是inline元素，它会与看不见的基线对齐

• 解决

1. vertical-align: top
2. img{display: block;}
3. font-size: 0 傻逼采用

其他

• inline-block 元素对不齐

几乎无解，不过可以使用display:flex或使用float解决

• inline-block 有空隙

可以使用display:flex或使用float解决