1. 两个div，父子关系，同时margin-top是10px,父距离子多少px，子距离父多少px

考点margin的重叠问题，父子同时margin-top： 10px，子的margin-top会作用于父元素，所以是父元素margin-top的距离是10px，父子之间为0，

拓展一下：

如果父margin-top： 10px，子margin-top为30px,那么会是什么效果？？答案是30px

margin：重叠遵照的规则为

两个正数取最大的数
两个负数取绝对值最大的数
一正一负取两者之和

2. css动画用到哪些

css3 实现动画主要有 3 种方式

transition 过渡动画
transform 2D 和 3D 转换
animation 自定义动画

3. 在移动端H5页面，怎么画宽度1px的border

1.使用border-image实现
2.使用background-image实现
3.多背景渐变实现
4.使用box-shadow模拟边框
5.伪元素+transform
6.viewport + rem 实现

4. UI稿是1280，怎么去做不同屏幕的适配

下面这种方法是通用的，1920是UI的初始稿，将他改成1280就可以


//控制数据大屏放大与缩小
let box = document.querySelector('.box'); 
box.style.transform = `scale(${getScale()}) translate(-50%,-50%)` //计算缩放的比例啦 

function getScale(w = 1920, h = 1080) { 
    const ww = window.innerWidth / w; 
    const wh = window.innerHeight / h; 
    return ww < wh ? ww : wh; 
    //ww<wh情况: 1920/1920(ww) 1080/1080(wh) //ww>wh情况:1920/1920(ww) 1080/1080(wh) 

} 

window.onresize = () => { 

    box.style.transform = `scale(${getScale()}) translate(-50%,-50%)` 

}

5. 低代码怎么实现的，各种element表单，如果不是竖向堆叠，如何布局好看（可以用element的删格）

这个之前有讲过，主要是json数据格式 + UI组件 + 技术栈渲染

布局好看，可以用element的Layout组件，栅格布局

6. vue2怎么实现监听数组的变化的，底层实现，用的什么设计模式

在 Vue2.x 的版本中，双向绑定是基于 Object.defineProperty 方式实现的。而 Vue3.x 版本中，使用了 ES6 中的 Proxy 代理的方式实现。

使用 Object.defineProperty 会产生三个主要的问题：

不能监听数组的变化

在 Vue2.x 中解决数组监听的方法是将能够改变原数组的方法进行重写实现（比如：push、 pop、shift、unshift、splice、sort、reverse），举例：


// 我们重写 push 方法 
const originalPush = Array.prototype.push 
Array.prototype.push = function() { 
// 我们在这个位置就可以进行 数据劫持 了 console.log('数组被改变了') 

originalPush.apply(this, arguments)

}

必须遍历对象的每个属性

可以通过 Object.keys() 来实现

必须深层遍历嵌套的对象

通过递归深层遍历嵌套对象，然后通过 Object.keys() 来实现对每个属性的劫持

观察者模式（有时也叫发布-订阅模式

7. vue的生命周期，DOM是在哪个阶段挂载，定时器在哪个阶段销毁

8. webpack性能优化，提到了抽取第三方库CDN，继续提问这样有什么缺点

⽤webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运⾏快速⾼效。

压缩代码:删除多余的代码、注释、简化代码的写法等等⽅式。可以利⽤webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩JS⽂件，利⽤ cssnano （css-loader?minimize）来压缩css
利⽤CDN加速: 在构建过程中，将引⽤的静态资源路径修改为CDN上对应的路径。可以利⽤webpack对于 output 参数和各loader的 publicPath 参数来修改资源路径
Tree Shaking: 将代码中永远不会⾛到的⽚段删除掉。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
Code Splitting: 将代码按路由维度或者组件分块(chunk),这样做到按需加载,同时可以充分利⽤浏览器缓存
提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码

缺点的话：

当网站更新时，如果 CDN 节点上数据没有及时更新，即便用户再浏览器使用 Ctrl + F5 的方式使浏览器端的缓存失效，也会因为 CDN 边缘节点没有同步最新数据而导致用户访问异常

9. css 左边固定，右边自适应

左边float：left，右边width：100%；
左边float：left，右边BFC
dispaly：flex；右边：flex：1
父：position：relative；左边：position：absolute；left：0；右边position：absolute；right：0；width：calc(100% -左边宽度）

高频面试题（一）