position有哪些属性和区别

position: static; 默认值。

正常的的布局行为，即元素在文档常规流中的当前布局位置。此时top，right，bottom，left和z-index属性无效。

position: relative; 相对定位，

相对正常位置进行定位（元素放置在未添加定位时的位置），在不改变页面布局的前提下调整元素。对table-group, table-row,table-column, table-cell, table-caption 元素无效。

position: absolute; 绝对定位，

元素会被移除正常文档流，并不为元素预留空间，通过指定元素相对于最近的非 static 定位祖先元素的偏移。

position: fixed; 固定定位，

元素会被移除正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口的位置来指定元素。元素的位置在屏幕滚动时不会改变。

position: sticky; 粘性定位，

元素根据正常文档流进行定位，然后相对它的最近滚动祖先和最近块级祖先，基于top，right，bottom和 left 的值进行偏移。偏移值不会影响任何其他的元素。

sticky 和 fixed的区别

fixed 相对于视口进行偏移，即定位基点是浏览器窗口，不管视口如何滚动，它的位置始终不变。搭配top，bottom，left，right这四个属性一起使用。

sticky 相对于最近的祖先元素随着页面的滚动而保持在固定的位置，超出祖先元素区域后就随着祖先元素一起滚动。sticky生效的前提是必须搭配top，bottom，left，right这四个属性一起使用，不能省略，用来定义“偏移距离”。

在Chrome如何支持小于12px文字

设置 -webkit-transform: scale(0.5);

可以使用 transform 元素（元素转换）的 scale 属性进行缩放，前面加上-webkit表示Chrome浏览器支持。使用该属性时只对块级元素或者设置display: block; 起作用

可以通过安装Advanced Font Settings插件支持到6px

对BFC规范的理解

BFC(Block Formatting Context) 块级格式化环境

BFC是css中的一个隐藏属性，可以为一个元素开始BFC，开启BFC该元素会变成一个独立的布局区域。
元素开启BFC后的特点：
开启BFC的元素不会被浮动元素所覆盖
开启BFC的元素的子元素和父元素外边距不会重叠
开启BFC的元素可以包含浮动的子元素
解决高度塌陷问题，开启BFC，使用任何属性去开启BFC 都会有一定的副作用，尽可能使用副作用表较小的方法。

则通过特殊的方式来开启BFC。对父元素使用某些属性，开启BFC。

根元素会创建BFC设置元素的浮动（不推荐，副作用太大）将元素设为行内块级元素（不推荐）将元素得到overflow设置一个非visible的值（推荐使用，副作用很小）设置元素的position属性值（元素的position为absolute或fixed）表格单元格（disaplay: table-cell，HTML表格单元个默认属性)弹性盒子 flex boxes（元素的display: flex或inline-flex）float: left;  //(不推荐使用，副作用太大)display: inline-block; //(不推荐使用，副作用太大)  overflow: hidden; (常用，副作用很小)// 某个元素因为其他元素浮动的影响而发生改变，使用clear清除浮动
clear: left;  // 清除左浮动
clear: right;  // 清除右浮动
clear: both; // 清楚两侧浮动的影响

​

BFC的范围：一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

也就是从另一个角度说明，一个元素不能同时存在于两个BFC中

BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

BFC的效果：

内部的盒会在垂直方向上一个接一个排列（可以看作BFC中有一个常规流）
处于同一个BFC中的元素相互影响，可能会发生margin collapse（外边距重叠），只有可能垂直方向上发生外边距重叠，水平方向上不会。
每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会受外面元素的影响，反之亦然；
计算BFC的高度时，考虑BFC所包含的的所有元素，连浮动元素也参与计算；
浮动盒区域不叠加到BFC上；