web前端基础知识点checklist

HTML

1. 元素分类，块级元素，行内元素。
2. 语义化。SEO

CSS

1. margin 纵向重叠

2. margin负值

3. BFC

1. 独立的渲染区域，内部元素的渲染不会影响边界以外的元素。
2. 形成BFC的条件。
3. 常见应用，清除浮动。

4. 布局

1. 圣杯，双飞翼
2. flex
3. grid

5. 定位

1. 居中问题

6. line-height

6.1 内联元素的高度机理

1. 内联元素的高度由行高决定。
2. line-height是两条基线之间的高度决定。
3. 高度的表现是内容区域 + 行间距，内容区域的高度只与字号和字体有关，与line-height无关。simsun字体下，内容区域高度等于文字大小。
4. line-height = content area height + 行间距。行间距可大可小，保证高度等于行高。
5. 多行文本的高度就是单行文本的高度的叠加。

6.2 line-height的继承

1. normal 默认值，跟着浏览器走，与字体关联。
2. line-height: ，根据当前元素的font-size计算大小，计算出绝对值px。可继承元素会继承该值，并根据font-size重新计算行高。
3. line-height: ，具体长度值作为行高。根据当前元素font-size计算行高，并继承给下面的元素使用。
4. line-height: 。相对于元素字体。继承性同

7. 响应式

7.1 rem是什么

根据根元素的font-size设置长度，屏幕宽度变化时不容易控制。百分比和vw会好一些。

7.2 解决方案

1. media-query 根据不同屏幕设置根元素字体大小。几个关键尺寸，375px(ip6/7/8)，414px(ip6p)。
2. 使用rem单位进行布局。

7.3 vm/vh

1. window.screen.height 屏幕高度，window.innerHeight 网页视口高度，document.body.clientHeight body的高度
2. 取高度/宽度的1/100
3. vmax和vmin

JS

1. 变量类型和计算

1.1 typeof运算符

1. 识别所有的值类型
2. 识别函数
3. 判断是否是引用类型（不可再细分）

1.2 深拷贝

1.3 类型转换

1. 字符串拼接
2. truly falsely变量

2. 原型和原型链

js是基于原型实现继承的语言。

2.1 class和继承

2.2 类型判断 instanceof

检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

2.3 原型链

在对象中查找对应属性，如果找不到，就去对象的构造函数的原型对象中去查找，如此递归。

3. 作用域链和闭包

3.1 作用域

作用域就是变量的合法使用范围，变量在当前作用域内没有找到时，会从上级作用域找，如果仍然找不到就继续向上级作用域找，直到顶级作用域。
所有的自由变量的查找都是在函数定义的地方开始，而不是执行的地方

3.2 this

this 的取值不是在定义的时候确定的，而是在执行的时候。

3.3 实现call apply bind

实现在这里

3.4 闭包的应用

1. 隐藏数据，模拟get set
2. 单例模式

4. js单线程&异步

js是单线程，js和dom渲染共用同一个线程，因为js可能修改dom，遇到等待不能卡住，需要异步。异步不会阻塞代码执行。

4.1 应用场景

1. 网络请求，ajax 图片加载
2. 定时任务

4.2 异步的实现方式

1. callback
2. promise，管道串联的形式

4.3 Event Loop机制

1. 同步代码，一行一行压入Call Stack中执行。
2. 异步代码，记录，等待触发。
3. 异步事件触发后，放入Call Queue
4. 如果Call Stack为空，Event Loop开始工作。
5. 查找Call Queue，如果有，则移入Call Stack中执行。
6. 如果没有，继续轮询。

5. DOM

6. BOM

7. 事件

8. ajax

9. 存储

10. http

11. 开发环境

12 运行环境