前端面试宝典-优快云博客

本文链接：https://blog.youkuaiyun.com/kuaileweixiao9898/article/details/83142465

面试前的准备工作

简历一定要写好
先想清楚你辞职想去的下一家的初衷是什么，是加薪资、提升技术 or 换个工作环境。
准备工作要做好。
规划好你自己的面试时间，提前要面试的公司做个简单的背景了解。公司的面试流程一般是笔试 or 电话面试 (可无) —> 技术面(1-2轮) —> HR面 。

知识点

1.HTML以及CSS篇，集中在CSS

说下你常用的几种布局方式，集中往盒模型、flex布局说(至于grid布局，这个我没看过)

固定布局：宽度，高度固定，页面被一个固定网页包裹，容器不能移动

流式布局：以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活

弹性布局（flex布局）：pc端并不推荐使用，ie9以下浏览器均不支持，移动端比较常用

浮动布局（float）：可以设置left或者right，他使元素脱离文档流进而达到布局的目的（使用浮动的结束以后，别忘记清除浮动哦）

定位布局： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动；position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用；position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位

margin和padding ：margin是外边距，padding内边距，外边距是盒子与盒子之间的距离，内边距是盒子的边和盒子内部元素的距离

2. 实现水平居中的几种方法

行内元素：text-align:center;

确定宽度的块级元素：

（1）margin和width实现水平居中（margin：0 auto）

（2）绝对定位和margin-left: -(宽度值/2)实现水平居中

固定宽度块级元素水平居中，通过使用绝对定位，以及设置元素margin-left为其宽度的一半

.content{

width:200px;
position:absolute;
left:50%;
margin-left:-(200/2);//元素宽度的一半
}

（3）position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto
//例如：
.content{

position: absolute;

width: 200px;

top: 0;

right: 0;

bottom: 0;

left: 0;

margin: auto;

}
对于未知宽度的块级元素

（1）table标签配合margin左右auto实现水平居中

使用table标签（或直接将块级元素设值为display:table），再通过给该标签添加左右 margin：auto

（2）inline-block实现水平居中方法

display：inline-block;（或display:inline）和text-align:center;实现水平居中
存在问题：需额外处理inline-block的浏览器兼容性（解决inline-block元素的空白间距）

绝对定位实现水平居中

绝对定位+transform，translateX可以移动本省元素的50%
.content{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
相对定位实现水平居中

用float或者display把父元素变成行内块状元素
.content{
display: inline-block; /* 把父元素转化为行内块状元素 */
/*float: left; 把父元素转化为行内块状元素 */
position: relative;
left: 50%;
}
/*目标元素*/
.con{
position: relative;
right: 50%;
}
CSS3的flex实现水平居中方法
/*法一*/
.content{
display: flex;
flex-direction: column;
}
.content .con{
align-self:center;
}

/*法二*/
.content{
display:flex;
}
.content .con{
margin:auto;
}
CSS3的fit-content配合左右margin为auto实现水平居中
.content{
width: fit-content;
margin-left: auto;
margin-right: auto;
}

3.animate和translate有没有用过，一些常见的属性说下？

Animation字面的意思就是“动画” 属性：animation: name（绑定到选择器的 keyframe 名称） duration（延长的时间） timing-function（动画的速度曲线：linear（速度相同） ease（先低速后加速） ease-in （低速开始） ease-out （低速结束） ease-in-out （低速开始和结束） cubic-bezier(n,n,n,n)（从 0 到 1 的数值）） delay（动画开始前的延迟） iteration-count （播放的次数（n（播放次数）|infinite（无限循环）））direction （是否循环播放（normal（正常播放）|alternate（轮流反向播放）））fill-mode play-state;
例子：animation:marginLeft 10s linear 2s infinite 100 reverse paused（姓名、时间、速度曲线、动画开始的延迟、播放次数、播放方式）
translate
transform：translate（位移）、scale（缩放）、rotate（旋转）、skew（倾斜转换）、perspective（透视视图）

4.CSS实现宽度自适应100%，宽高16:9的比例的矩形

比如width:100%;

height:100% * 9/16 =56.25%;

//css
*{
margin:0;
padding:0;

}

//外层，包裹矩形的div，用来控制矩形大小

.big{
    width:20%;
}
//矩形
.box{
  width:100%;
  height:0;
  padding-bottom:65.25%;
  position:relative;
  background:pink;
}
//矩形的内容
.box p{
   width:100%;
   height:100%;
   position:absolute;
   color:#333;
}


//html
<div class="big">
    <div class="box">
        <p>矩形</p>
    </div>
</div>

5.如何实现左边两栏一定比例，左栏高度随右栏高度自适应？

//css
.con{
    width:900px;
    height:100%;
    overflow:hidden;
    margin:0 auto;
}
.left{
    height:100%;
    width:200px;
    overflow:hidden;
    background:#ff5;
    word-break:break-all;
    padding-bottom:9999px;
    margin-bottom:-9999px;
    float:left;
}
.right{
    width:100px;
    float:left;
    height:auto;
    background:#f5f;
    word-break:break-all;
}

//html

<div class="con">
    <div class="left">123</div>
    <div class="right">gfkjqouewgshjcgsdahjdhkeyfjbqewfjegfjewqjfregfnmqewhfcureqbcferfge</div>
</div>

2.JavaScript篇

变量提升遇到的一些简单code题
说一下对闭包的理解，以及你在什么场景下会用到闭包？
说一下你对原型与原型链的了解度，有几种方式可以实现继承，用原型实现继承有什么缺点，怎么解决？
iframe的缺点有哪些？
Ajax的原生写法
为什么会有同源策略？
前端处理跨域有没有遇到过，处理跨域的方式有哪几种方式去解决
怎么判断两个对象是否相等
代码实现一个对象的深拷贝
从发送一个url地址到返回页面，中间发生了什么
说下工作中你做过的一些性能优化处理

3.ES6篇

箭头函数中的this指向谁？
如何实现一个promise，promise的原理，以及它的两个参数是什么？
promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的，分别这么写有什么区别，什么情况下会两个都同时用到？
map和set有没有用过，如何实现一个数组去重，map数据结构有什么优点？

4.计算机网络篇

http、https、以及websocket的区别
http常见的状态码，400,401,403状态码分别代表什么？
协商缓存和强缓存的区别
说下计算机网络的相关协议？

5.浏览器兼容性问题

主要是兼容IE8以上以及其他各个浏览器

使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面
```
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
```
rgba不支持IE8 解决：用opacity
CSS3前缀

-webkit- webkit渲染引擎 chrome/safari
-moz gecko引擎  firefox
-ms- trident渲染引擎 IE
-o-  opeck渲染引擎 opera

background-size不支持IE8，可以用img
使用PIE.htc让IE6/7/8支持CSS3部分属性，像CSS3的border-radius，box-shadow，css backgrounds(-pie-background),Gradients,RGBA属性

.border-radius {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background: #abcdef;
behavior: url(css/PIE.htc);
}

过渡不兼容IE8，可以用JS动画实现

参考文章：

https://www.w3cplus.com/css/elements-horizontally-center-with-css.html

http://blog.sina.com.cn/s/blog_c112a2980102xt3y.html

https://blog.youkuaiyun.com/dengdongxia/article/details/80297116

https://segmentfault.com/a/1190000014730597

面试题（4）

面试前的准备工作

知识点

1.HTML以及CSS篇，集中在CSS

2.JavaScript篇

3.ES6篇

4.计算机网络篇

5.浏览器兼容性问题