面试总结-2020-9 ①_put请求无响应体-CSDN博客

本文链接：https://blog.csdn.net/ZHgogogoha/article/details/108574342

总结

感慨

学前端一年零二个月，天天就是对着屏幕，第一次面试，以问答的方式来检验自己的学习成果。面的是一家小公司，其实挺好的，一周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;
}

#parent {
    display: flex;
}
#son {
    align-self: center;
}

#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方法用于沿着目标资源的路径执行消息环回测试；它回应收到的请求，以便客户可以看到中间服务器进行了哪些（假设任何）进度或增量。