【截图】常见前端面试题

https://www.bilibili.com/video/BV1ek4y1r7GT

day01 css3

1.标签语义化

顾名思义，合理的标签干合适的事情

块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot

行级（display：inline）：a、span、small、strong、em、i、code、

行内块（display：inline-block）：img、input

区别：

1.行内元素与块级函数可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。

3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

display还有none（隐藏dom）、flex（弹性）、table（表）

display：none和visibility：hidden、ocpacity：0（兼容用fliter）

filter滤镜：对比度、饱和度、阴影、色相、透明度

display：flex 响应式、兼容性

2.盒子水平垂直居中

项目中经常遇到这种需求，最开始xxx，喜欢用flex，后来发现xxx，在xx博客上突然发现xx更好，xx解决了兼容性（拒绝背书式）

（1）定位1：需要知道父的宽高

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VlsIX3oj-1591087127372)(upload\image-20200602104327188.png)]

（2）定位2：需要父亲有宽高限定

（3）定位3：不需要父有具体宽高限制（兼容性不如上边Ie9+）

（4）display:flex（ie10+）

（5）js实现就是模拟css写样式

（6）固定宽高的父级 display：table-cell 子级inline-block

3.盒模型标准

content、padding、border、margin

标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型

怪异盒模型的好处，固定到border控制宽高，不用重新计算padding和border

flex详见阮一峰的flex布局

多列布局

4.几大经典布局

–左右固定、中间自适应

圣杯布局

双飞翼

使用calc

使用flex

定位实现

–移动端响应式布局

*媒体查询（一套）

*rem（应用于两套 中的移动端）

flex

vh/vw

day 02 js

1.对象深浅拷贝

JSON.parse(JSON.stringify(obj))不能对函数、正则、时间对象、数字对象的时候会不好用

最佳递归实现（这个没搞function），自己加一下用instanceof即可,建议统一用Object.prototype.toString.call

2.堆栈内存+闭包作用域

堆：存储引用类型值的空间

栈：存储基本类型值和指定代码的环境

答案：培训，对象的key数字和字符串等效

答案：珠峰，Symbol的特点，都是唯一的

答案：培训，key会转化成字符串[Obejct object]

答案：‘4’，alert弹出的会转化成字符串

答案：‘1’ ‘4’

3.一道面向对象面试题

4.EventLoop

同步异步、宏任务微任务

5.使下面输出1

var a={
    toString = function*(){
        yield 1;
        yield 2;
        yield 3;
    }
}

a.toString

会转换，规则：

对象==字符串 对象.toString

null==undefined 相等 但是和其他值不相等

NaN！=NaN

剩下的都转换成数字

数据劫持

数组弹出

day03 React常见

1.react双向绑定

2.跨域问题

因为同源策略，采用前后端分离

Jsonp

只能get，不安全、有缓存、大小限制

iframe

• window.name
• document.domin
• location.hash
• post message

CORS-服务端配置

http Proxy

webpack添加proxy

nginx反向代理

在build之后proxy不可以用，要服务器端nginx反向代理

3.组件中通信

day 04 入门算法

1.数组去重和排序

去重

排序

冒泡、插入、快速（略

2.数组扁平化

3.斐波那契数列

4.输出所有和N的连续正数序列