@import & <link>

1. link功能更多，可以定义rss, 定义rel, import只能用于加载css
2. html在解析时，遇到link会同步加载css, import在页面加载完成后才执行
3. link没有兼容性问题,import在IE低版本无法使用
4. link可以使用JS动态加入，import不能

CSS 样式优先级

1. !important > inline style > #id > .class > tag

pseudo-class 伪类 & pseudo-element 伪元素

1. 伪类用一个冒号(:)放在选择器的后面， 用于在特定的情况下触发特定的样式，常见的伪类如: hover, nth-child()
2. 伪元素用两个(::)放在选择器的后面，用于指定元素的某个特定部分的样式，常用::after来清楚float

BFC

1. box是布局的基本单位，根据CSS代码和所使用的tag标签，元素会被分为不同的box，比如块级元素的box类型是block-level-box，相对还有inline-level-box, 不同的box类型会进入不同的渲染区域FC（Formatting Contexts） css2.1规定的FC有 BFC（Block Formatting Contexts） 和 IFC (Inline Formatting Contexts), css3新增 GFC（Grid Formatting Contexts）和FFC（Flex Formatting Contexts）
2. BFC(Block formatting context)直译为"块级格式化上下文", Block-level-box的元素会进入这个渲染区域
3. BFC渲染规则
   1. 垂直方向上marggin会合并
   2. 不会与float元素发生重叠
   3. BFC是一个独立的容器，与外部的元素互不影响
   4. 计算BFC高度时，浮动元素也会参与计算
4. BFC使用场景
   1. 解决边距重叠问题
   2. 解决面积重合问题
   3. 清除浮动
5. 哪些写法会生成BFC
   1. float 不为 默认值
   2. position 不为默认值
   3. overflow 不为默认值
   4. display 为 inline-blcok、table-cell、table-caption

e:nth-child(n) VS e:nth-of-type(n)

1. e:nth-child(n) 父级下面的第n个元素
2. e:nth-of-type(n) 父级下面的第n个类型为e的元素

EM & REM

1. EM是相对相对单位，取决于当前元素的font-size，如果当前元素的font-size:20px; 那么2em=40px; 如果当前元素没有显式的这是font-szie，那么font-size的值继承于父元素

2. REM为ROOT EM，即根元素的EM

移动端1px问题

1. 一般PC端浏览器的像素比(dpr)为1，意思是物理像素和CSS像素是一样的，但是在移动端，同样大小的设备屏幕，物理像素并不一样，iphone的dpr普遍达到2或者3，意味着承载1px面积的物理像素可能是4个物理像素或者9个物理像素
2. 可以通过JS计算像素比, 动态的设置meta标签来调整缩放

   <meta name="viewport" content="initial-scale=1.0"/>