小知识系列1--CSS

1、上下左右居中

实现：父元素 display:flex; 子元素 margin:auto;

原理：

bfc（块级格式化上下文）下margin无法垂直居中的原因：margin-left和margin-right都为auto的时候，则表示他们的值相等，值得计算为剩余空间的一半，所以会达到水平居中。而当margin-top和margin-bottom为auto的时候，则表示他们的值是0，所以无法完成垂直方向的居中。
ffc下margin垂直水平居中的原因

ffc就是flex布局的格式化上下文，在ffc中设置子元素margin:auto;在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去，这里特别说明下，设置了margin:auto后再设置父元素的justify-content或者子元素align-self则不生效，这里存在优先级的问题，margin的优先级更高一些。

2、谷歌浏览器的字体不能小于12px的问题

实现：

transform: scale(0.8);
-webkit-transform: scale(0.8);

原理：scale() 这种方法修改的不是元素的宽高，而是x，y的刻度；