总结
感慨
学前端一年零二个月,天天就是对着屏幕,第一次面试,以问答的方式来检验自己的学习成果。面的是一家小公司,其实挺好的,一周4天3k,只是想多面几家长长见识,同时查漏补缺,所以就没去。有点后悔哈哈哈。面试过程的话还好,进去前有一点紧张,写完笔试题感觉进入了状态,反正会的咱就回答,不会也别编造,也不会怎么样,我大概有20%的题没有答出来,但是面试官后面还是笑眯眯的,老板也当场给了口头邀请。
答得不好的题目
css相关
1.清除浮动的方式有哪些,最少两种?
我写了创建BFC,还有一个是使用伪类。
伪类的代码
.clearfix:after {
display: block;
content: " ";
clear: both;
}
一般使用BFC还是伪类更好?
我下意识居然答了BFC好,主要是BFC刚弄明白一点,就觉得它挺厉害…
实际上还是使用伪类好,如果添加类似于float: left
,overflow:hidden
这样的属性,对页面的影响可能非常大,而伪类不会参与DOM树的渲染,因此影响最小化。
2.垂直水平居中,至少两种方案
水平居中
-
优先考虑,
text-align:center
,但仅对行内元素有作用,即display:inline
,display:inline-block
,单行文本; -
对于块级元素,考虑
margin: 0 auto
;-
#son { width: 100px; /* 必须定宽 */ margin: 0 auto; }
-
-
使用position处理
-
top\right/bottom/left的值是相对于父元素尺寸的
-
#parent { position: relative; width: 200px; } #son { position: absolute; left: 50%; width: 100px; margin-left: -50px;/* 元素自身宽度的一半 */ /* 等价 transform: translateX(-50%); */ }
-
使用margin-left或transform都是相对自身尺寸。
-
优缺点:
-
margin-left兼容性好,但需要知道宽度。
-
transform兼容性不好(ie9+),但不需要知道宽度。
-
-
移动端能用flex就用flex
-
#parent { display: flex; justify-content: center; }
-
垂直居中
-
优先考虑
line-height
,但仅对行内/行内块级/文本起作用。-
#parent { height: 100px; line-height: 100px; }
-
-
position定位,代码多些,胜在适用于不同情况
-
flex布局
-
#parent { display: flex; align-items: center; }
or
-
#parent { display: flex; } #son { align-self: center; }
-
or
-
#parent { display: flex; flex-direction: column; justify-content: center; }
-
水平垂直居中
-
行内/行内块级/图片
-
#parent { height: 150px; line-height: 150px; text-align: center; font-size: 0; } #son { /* display: inline-block 块级元素要设置成行内块级才奏效*/ vertical-align: middle; }
-
-
绝对居中,适用各种情况,但代码较多,脱离文档流
-
#parent { position:relative; } #son { position:absolute; margin: auto; width: 100px; height: 50px; top: 0; bottom: 0; left: 0; right: 0; }
-
当top、bottom为0时,margin-top&bottom设置auto的话会**无限延伸占满空间并平分。**left、right同理
-
还有就是之前的定位,但是设置left:50%
-
-
flex布局
3.position的值都有哪些,相对什么定位?
这题容易出错的地方是position:relative;是相对自身位置定位的。
然而我错在了写了个一个position:none…其实应该是static…面试官也没发现哈哈哈(可能是字太丑了),但是我们必须严谨对待。
4.css中有哪些元素会被继承?
放几个常用的。
1、字体系列属性
font-family:字体系列
font-weight:字体的粗细
font-size:字体的大小
font-style:字体的风格
2、文本系列属性
text-indent:文本缩进
text-align:文本水平对齐
line-height:行高
color:文本颜色
3、元素可见性:
visibility:控制元素显示隐藏
4、列表布局属性:
list-style:列表风格,包括list-style-type、list-style-image等
5、光标属性:
cursor:光标显示为何种形态(其实这个很好理解,设置cursor:pointer,整个父元素以及它的子元素都会改变鼠标移入效果)
JS相关
1.如何判断数组?
- Array.isArray
- instanceof
- Object.prototype.toString(这个是jQuery用的方法,当时没反应过来)
2.如何判断引用类型
- 当时说了用typeof排除null的情况,然后其他都返回"object",其实是有问题的,函数对象类型会返回"function"。
http相关
1.get和Post请求的区别
我答出了语义化的区别,get的url传参长度限制,还答了个安全性。
尤其是这个安全性,面试官当时纠正了一下这个误区,即使发送Post请求,在请求体中也会暴露信息。
- 真相
首先get和post在本质上都是tcp链接,但由于http协议和浏览器或者服务器的限制,从而使它们在应用过程中产生了差别,但是它们中还有一个较大的区别:get在请求时发送一个数据包,会将header和data一起发送过去,而post会产生两个数据包先发送header,服务器返回100,然后在发送data,服务器返回200,当然并不是所有浏览器都会在POST中发送两次包,Firefox就只发送一次。
所以当你一层一层的把get和post剖析到底,你会发现他们的本质就是tcp连接,没有啥区别,只是由于http协议规定和浏览器或者服务器的限制,导致他们在应用过程中体现形式不同。
其他区别
- get请求会保存在浏览器历史记录中,还可能保存在web服务器的日志中
总结
- 别再提安全性,传入的参数/数据都能被获取
- 语义上的区别
- get请求会保存在浏览器历史记录中,post不会
- url传参的限制
2.除了get/post请求,你还知道哪些请求方法?
-
HEAD
HEAD方法与GET方法相同,但没有响应体,仅传输状态行和标题部分。这对于恢复相应头部编写的元数据非常有用,而无需传输整个内容。
-
PUT方法
PUT方法用于将数据发送到服务器以创建或更新资源,它可以用上传的内容替换目标资源中的所有当前内容。
它会将包含的元素放在所提供的URI下,如果URI指示的是当前资源,则会被改变。如果URI未指示当前资源,则服务器可以使用该URI创建资源。
-
DELETE方法
DELETE方法用来删除指定的资源,它会删除URI给出的目标资源的所有当前内容。
-
OPTIONS方法
OPTIONS方法用来描述了目标资源的通信选项,会返回服务器支持预定义URL的HTTP策略。
-
TRACE方法
TRACE方法用于沿着目标资源的路径执行消息环回测试;它回应收到的请求,以便客户可以看到中间服务器进行了哪些(假设任何)进度或增量。
3.HTTP响应代码
每个开头答了一个…,继续背吧。
这个临时响应表明,迄今为止的所有内容都是可行的,客户端应该继续请求,如果已经完成,则忽略它。
该请求已成功,并因此创建了一个新的资源。这通常是在POST请求,或是某些PUT请求之后返回的响应。
301 Moved Permanently
(永久重定向)
被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个 URI 之一。
请求的资源现在临时从不同的 URI 响应请求。由于这样的重定向是临时的,客户端应当继续向原有地址发送以后的请求。
1、语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。
2、请求参数有误。
当前请求需要用户验证。
服务器已经理解请求,但是拒绝执行它。 401 响应不同的是,身份验证并不能提供任何帮助,而且这个请求也不应该被重复提交。
服务器遇到了不知道如何处理的情况。