目录
IFC：Inline Formating Content，是在inline元素做排版的时候给一个基准，面试很偏
BFC：Block Formating Content，是在block元素做排版的时候给一个基准
- font-size em-square
- line-height 实际占地高度
- 100px 100px -> 103px
- vertical top middle bottom text-top text-bottom
- 图片下面有空隙
- vertical-align: top
- img{display: block;}
- font-size: 0 傻逼才用
- inline-block 元素对不齐 ——无解 —— 用 flex 或 float
- inline-block 有空隙 ——用 flex 或 float
什么是font-size？
- 了解IFC就是在了解我们在写font-size的时候在写什么？
- 我们发现不同字体的话，会有不同的样式，直观上这些字会有大小差异
-
字体大小是由设计师决定的，跟font-size之间是间接关系；fontsize并不是原生字体的大小
image.png - font-size其实指的是em-square，就是设计师在设计字体的时候会找一个固定大小方框，这个方框是网格状的。具体的算法很复杂。
什么是line-height
- 我们看到各个字体是不一样的，为什么他们对不齐呢？
-
使用一个p标签包围他们，我们发现p的顶部跟第三个对齐，p的底部跟第2个对齐
image.png - 我们看到其实各个字体是以基线对齐的，就是x的底部
-
我们使用相同的字体，给所有的span一个固定的line-height，我们可以看到span超出了p，但是此时的p的高度确是100px，跟span的line-height一样
image.png -
很多前端的人，会通过line-height来让里面的span自动居中，即便这个line-height比字体还要小，也会让字体居中对齐，即便他放不下去。所以line-height决定的是内联元素的真实占地高度，多余的部分就悬在空中
image.png
image.png -
问：line-height是100的时候。p元素的高度一定是100吗？我们保持三个span的line-height都是100，但是我们更改一个span的字体，现在p元素的高度确是105px，去除边框高度，多了3px
image.png - 这是因为我们字体不一样，导致了我们基线不一样；当两个inline的字体不一样的时候，为什么会使得父元素p变高呢？
-
因为两种文字的基线位置不一样，但是又是以基线对齐的，所以上面下面就会出现偏差，合格偏差就是这个3px
image.png - 每一行是由每一个span的实际占地面积决定的，跟span的可视化面积没有关系。line-height就是实际占地面积，而为什么都是100的line-height的前提下，由于基线错位，所以会出现父元素高于100px
- 如果我们不写lin-height，那么line-height是多少呢？不同的字体font-size跟line-height之间的高度是有比例的，会不一样的。
- 当我们设line-height: 1.5的时候，其实是在设比例为1.5；
什么是vartical-align
- 这个是用来设置对齐方式的。
-
vertical-align: top是在设置对齐方式按照实际占地面积的顶部跟别人对齐；但是没有人能看见实地占地面积，没用的
image.png
image.png - 使用middle呢？使用父元素baseline的高度加上父元素中x-height的一半的高度来对齐当前元素垂直方向上的中点；一般来说，middle不是字居中对齐，是实际占地居中对齐
- 两个inline元素，基本对不起
图片对齐下面为什么会有空隙？
-
我们又一个div，有一个image，发现div的高度比image高
image.png - 因为图片是inline-block元素，就是inline元素。两个内联元素的对齐方式是使用baseline对齐；
-
一个image元素怎么对齐呢？会跟看不见的文字基线对齐，image的基线就是最下面
image.png -
不要使用font-size去解决这个BUG，会出现很多其他问题的
image.png - 解决的方法就是使用vertical-align: top;就是使用实际高度的top进行对齐 ；使用middle，bottom等都可以，只要不是默认的基线对齐就可以，一般加middle
image.png
经常有人用inline-block做布局，会有BUG，怎么对齐
-
我们对齐文字跟圆形图片，发现使用vertival-align无法做到两个inline对齐，使用flex就好了，剩下就不管了
image.png -
两个inline之间有空格，还是使用flex或者float就好了
image.png
