一、HTML、CSS
1.1 HTML常见面试题
- 如何理解HTML语义化
1.让人更容易理解代码（增加了代码的可读性）
2.让搜索引擎更容易解析代码（SEO优化）
3.特定的标签做特定的事
- 默认情况下，那些标签是块级元素，哪些是行内元素？
1.display:block/table,有div p ul ol h1-h5
2.display:inline-block/inline,有span input button img
1.2 CSS—布局
- 盒子模型宽度如何计算
1.答案：122px
2.offsetWidth=content+border+padding,不包含margin
- margin总纵向重叠的问题
1.相邻元素的margin-top和margin-bottom会发生重叠
2.空白内容的也会重叠
3.答案：15px
- margin负值的问题
1.margin-left和margin-top设置负值，元素本身分别会向左和向上移动相应距离
2.margin-right设置负值，右侧元素向左移动，自身不受影响
3.margin-bottom设置负值，底侧元素向上移动，自身不受影响
- BFC理解和应用
Block Format Context，块级格式化上下文
一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
- 形成BFC的条件
float不是none
position是fixed和absolute
overflow不是visible
display是flex inline-block
- 圣杯布局和双飞翼布局的目的
三栏布局，中间内容最先加载（内容最重要）
两侧内容固定，中间自适应
一般用于PC端网页
- 圣杯布局和双飞翼布局技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被覆盖，一个用margin一个用padding
- 圣杯布局
- 双飞翼布局
- 手写clearfix
2.3 CSS—定位
- absolute和relative分别依据什么定位？
absolute以及上一级定位元素
relative依据自身位置
- 居中对齐有哪些实践方式？
垂直居中：
inline元素：line-height等于height的值
absulote元素：top：50%；margin-top：-高的一半
absulote元素：transform:translate（-50%，-50%）top：50%; left:50%
absulote元素：top right bottom left 全都等于0 margin;auto
水平居中：
inline元素：text-align：center
block元素：margin：0 auto；
absolute元素：left：50%；margin-left：-宽的一半
2.4 CSS—图文样式
- line-height的继承问题
答案：40px
写具体数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值
2.5 CSS—响应式
- rem是什么
rem是一个长度单位
px绝对长度单位，最常用
em相对长度单位，相对于父元素
rem相对长度单位，相对于根元素，常用于响应式布局
- 如何实现响应式
media-query,根据屏幕宽度设置font-size
rem基于根元素长度单位
- rem的弊端：阶梯性
- 网页视口尺寸
window.screen.height 屏幕高度
window.innerHeight 视口高度
document.body.clientHeight body高度
- vh vw
vh 网页视口高度的百分之一
vw 网页视口宽度的百分之一
vmax取两者最大值
vmin 取两者最小值
二、变量类型和计算
2.1 题目
- typeof能判断哪些数据类型
- 何时使用三等何时使用==
- 值类型和引用类型的区别
- 手写深拷贝
2.2 值类型
2.3 引用类型
2.4 字符串拼接
2.5 ==运算符
2.6 if语句和逻辑运算
- turly变量：！！a=true的变量
- flasely变量：！！a=flase的变量
2.7 手写深拷贝
三、原型和原型链
3.1 问题
- 如何准确判断一个变量是不是数组
- 手写一个简易的JQuery，考虑插件和扩展性
- class的原型本质，怎么理解
3.2 class
3.3 继承
3.4 原型
- 每个class都有显示原型
- 每个实例都有隐式原型_proto_
- 实例都有隐式原型_proto_指向class的prototype
3.5 基于原型的执行规则
- 获取属性或执行方法时，先在本身找
- 如果找不到再去_proto_找
- 一层一层向上找直至object
3.6 原型链
3.7 手写bind函数
3.8 手写一个简易的JQuery，考虑插件和扩展性
四、作用域和闭包
4.1 题目
- this的不同应用场景如何取值
- 实际开发中，闭包的应用场景？以及什么是闭包？
4.2 作用域
- 全局作用域
- 函数作用域
- 块级作用域（ES6新增）
4.3 自由变量
- 一个变量在当前作用域没有定义，但被使用了
- 向上级作用域一层一层的寻找，直至找到
- 如果全局作用都没有找到，则会报xxx is notb defined
4.4 闭包
- 作用域应用的特殊情况
函数作为参数被传递
函数作为返回值被传递
- 自由变量的查找，是在函数定义的地方，向上一级作用域查找，不是在执行的地方
4.5 this
- 作为普通函数
- 使用apply call bind
- 作为 对象方法被调用
- 在class中调用
- 箭头函数：永远取上级this的值
- 注意：this取什么值是在执行的时候确定的，不是在定义的时候确定的
4.6 实际开发中，闭包的应用场景
- 隐藏数据
如做一个简单的cache工具