1.小于12px的字体如何显示
在Chrome浏览器下，小于12px的字体，也是按12px进行显示的，通常解决办法是：
transform：scale（0.8），display:inline-block。
scale是一个2d缩放属性，inline-block是因为只有能设置宽高的元素才能使用scale属性。
2.border实现三角形
首先border实际是梯形。
当content的width和height都为0时，梯形就成了三角形。 设置三角形时，需要将其他的border设置成transparent（透明），如果有一边设置为0了，那么它这一侧都会被砍掉，如下图：
为什么会出现这个样子呢？原因就是，上半部分是个红色倒三角，右边和下边都是透明三角，而左边border为0，直接整个左半边都被砍了，导致上半部分的倒三角也被砍了一半。所以实现倒三角的时候，为了不过多占用空间，下面的border是可以为0的，但是左右是不能为0的。
3.理解line-height
先上图：
line-height = font-size + 行距
在官方定义中，是两基线距离，称为line-height。实际上是上下半行距，加上fontsize是line-height的值。
文字基线（baseline）：文字基线实际是英文小写字母x的底部位置。
middle（vertical-align属性)：是元素的垂直中心位置和x的中心交叉点对齐。
文字在div中展示时，div被分为一行一行的，line-height就是这个行高。文字在每一行中居中展示，文字大小由font-size决定，行中上、下部分空余，分别称为上、下半行距。
vertical-align：仅作用于行内元素上，一个行内元素放在div中，实际和文字是差不多的角色。这个元素在行内垂直方向的位置，可以由vertical-align来调整。
4.BFC
简单点，直接看官方文档：developer.mozilla.org/zh-CN/docs/…
5.CSS中flex和inline-flex的区别
一句话来描述就是 当Flex Box 容器没有设置宽度大小限制时，当display 指定为 flex 时，FlexBox 的宽度会填充父容器，当display指定为 inline-flex 时，FlexBox的宽度会包裹子Item。
也就是说影响flex容器宽度，flex时没写width，一般和div一样，是100%。同样的inline-flex时，容器宽度是由内部元素撑开的，不会直接100%。
