IFC

IFC（BFC的兄弟）

给块盒做基准的叫 BFC，因为块父容器会紧紧地包住它的内容，因此BFC为块盒内容提供了内容排版的基准，比如左上角、右上角、左下角、右下角。

给 inline 盒做基准的叫 IFC 。IFC 不理解也没有关系，理解了就更能理解CSS一些很奇怪的 bug。CSS要靠感觉写，不要靠逻辑。

IFC 知识

今天的课就是将这篇文章《深入理解 CSS：字体度量、line-height 和 vertical-align》展开讲一下

1. font-size 规定em-square
2. line-height 是内联文字实际占地高度。code
3. 100px 100px -> 103px

font-size 到底是什么？

给文字设置 font-size 到底是在设置什么？em-square

给文字设置 font-size: 24px; ，但是 不同字体 显示的字 大小都不一样。

要想知道 font-size，需要深入了解字体设计。

字体是一个矢量图。

文字高度是字体设计师决定的。文字大小也是由字体设计师决定的，与 font-size 只是有间接的关系。

line-height

行盒 line-box

行内文字默认用 baseline 对齐，这跟我们小时候写字很像。

文字字体不一样，基线不一样。

默认 line-height 值 是 normal ， normal 是设计师决定的，设计师决定多少行高好看就用哪个行高。

一般设置 line-height: 1.5;。行高是上下两基线之间的距离。

vertical-align 属性

vertical-xxx

• top
  实际占地高度的顶部对齐。
• middle
  用父容器的 baseline 加上 x 高度的一般 与 文字实际占地高度的中部对齐。
• bottom text-top text-bottom
  没什么用

vertical-align 属性 基本就不靠谱，感觉每个设计师设计字体的习惯不一样，留出的空间也不一样。

两个字体不一样的行内文本是没有办法对齐的。

用 inline-block 做布局 ，会遇到两个 bug

1. 元素对不齐 ——无解 —— 用 flex 或 float
2. inline-block 有空隙 ——用 flex 或 float

清除图片下面默认的空隙

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

code

注意

• vertical-align 属性不靠谱基本没用
• vertical-align: middle 能对齐是运气好，可能换个浏览器就不行了
• 垂直对齐两个内联 span 不一定能行。用 flex