HTML

1.script标签中defer和async的区别

1. defer下载和执行均不影响解析渲染
2. defer在DOMContentLoaded和loaded事件之前执行
3. 多个defer并行下载顺序执行
4. async下载不影响解析渲染
5. async下载完后立即执行，可能影响解析渲染
6. async可能在DOMContentLoaded事件之前或之后执行，取决于何时下载完成
7. 多个async并行下载不按顺序执行
8. DOMContentLoaded是在初始文档下载解析好的时候触发，loaded是在所有资源加载完后出发

2.getelementbyXXX和queryselector的区别

1. getelementbyXXX比queryselector快，但queryselector使用方便
2. queryselector参数必须符合css选择器字符串
3. queryselector获取的是一个快照，getelementbyXXX获取的是动态的节点

CSS

1.position和float的区别

1. float不会影响之前的元素
2. position完全脱离文档流，float虽然也脱离文档流，但还是会影响布局(文字环绕)

2.z-index

1. position+z-index:0会触发产生层叠上下文，position+z-index:auto不会
2. position+z-index才能使z-index生效

3.层叠上下文

3.1 触发条件

1. HTML会产生默认层叠上下文
2. position+z-index：正数
3. flex+z-index：正数，子元素创建层叠上下文
4. opacity不为1
5. translate

3.2 比较规则

1. 如果是在相同的层叠上下文，按照层叠水平的规则来显示元素
2. 如果是在不同的层叠上下文中，先找到共同的祖先层叠上下文，然后比较共同层叠上下文下这个两个元素所在的局部层叠上下文的层叠水平

4.层叠水平

4.1 7层层叠水平

1. background/border
2. 负z-index
3. block盒子
4. float盒子
5. inline/inline-block盒子
6. z-index:0/auto
7. 正z-index

4.1 比较规则

1. 后来居上原则
2. 谁 z-index 大，谁在上的准则

5.清除浮动

5.1 清除浮动的方法

1. 父元素overflow: hidden BFC原理：BFC计算高度时会将浮动元素计算入内
2. 所有浮动元素之后加入clear:both clear原理：clear元素会处于之前创建的浮动元素的底边距下面，所以必须要把clear:both的元素放在所有浮动元素之后

5.2 clear：both left right的区别

1. left: 置于之前创建的左浮动元素的底边距下面
2. right: 置于之前创建的右浮动元素的底边距下面
3. both: 置于之前创建的所有浮动元素的底边距下面