记录一次web前端面试经历:春节过后回到学校就开始找工作,简历到处投递,但是回应者寥寥无几,也许是前端开发供大于求,也许是互联网寒冬,也许是就业压力大。这次去网易面试的机会是我偶然看到脉脉上有帮忙内推的我就发了一份简历,结果真的就收到了面试邀请。
面试虽然没有通过,但是每一次面试都是一个学习的过程,必须要总结经验,所以下面是面试中遇到的问题:
自我介绍
我想到小岳岳的一句话:口齿伶俐,表演大方。肚子里有东西但是说不出来就跟没有一样的,说起来有点功利,但是提前打好草稿还是有必要的,先说什么后说什么。重点是什么,都需要提前考虑好的。
面试题目
两列布局:
css实现一个左侧固定(200px),右侧自适应的两列布局:
我首先就想到了前几天在慕课网学习《Vue.js高仿饿了么》时用到的flex布局,html代码如下:1
2
3
4<div class="main">
<div class="left"></div>
<div class="right"></div>
</div>
flex布局代码:
1 | html, |
flex布局教程参见阮一峰老师的博客,这里不再赘述。简单写一下flex布局的参数含义:flex
属性是flex-grow
, flex-shrink
和flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。1
2
3.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。flex-basis
属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
浮动+IE盒子:
1 | .main { |
浮动+margin
把div.right的样式改成这样也可以:1
2
3
4
5.right {
height: 100%;
background-color: #00ffff;
margin-left: 200px;
}
或者:1
2
3
4
5.right {
height: 100%;
background-color: #00ffff;
overflow: auto;
}
垂直+左右居中
HTML代码:1
2
3<div class="main">
<div class="content"></div>
</div>
margin+relative+top
CSS1
2
3
4
5
6
7
8
9
10
11
12
13.main {
width: 100%;
height: 100%;
}
.content {
position: relative;
top: 50%;
width: 500px;
height: 500px;
margin: -250px auto 0;
background: #ff00ff;
}
translateY(-50%);
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14.main {
width: 100%;
height: 100%;
}
.content {
position: relative;
top: 50%;
width: 500px;
height: 500px;
margin: 0 auto;
background: #ff00ff;
transform: translateY(-50%);
}
flex
CSS1
2
3
4
5
6
7
8
9
10
11
12
13
14
15.main {
width: 100%;
height: 100%;
display: flex;
align-items: center;
/*定义body的元素垂直居中*/
justify-content: center;
/*定义body的里的元素水平居中*/
}
.content {
width: 500px;
height: 500px;
background: #ff00ff;
}
http状态码
1 | 100 Continue 继续,一般在发送post请求时,已发送了http header之后服务端将返回此信息,表示确认,之后发送具体参数信息 |
ajax创建过程
1 | (1)创建`XMLHttpRequest`对象,也就是创建一个异步调用对象. |
写在最后
由于自己表现的不好,就没有问很深入的问题,最后一项往往是面试官问应聘者有什么问题要问吗,我就来了个套路:我距离这个岗位还有什么不足的地方?得到的回答是:CSS基础不好,js基础也要加强···
内心:gg了