关于前端的一些面试问题？

小哥愿与愁

已于 2023-05-13 23:24:41 修改

阅读量127

点赞数

文章标签：前端面试 http 网络

于 2023-05-13 23:23:25 首次发布

本文链接：https://blog.csdn.net/weixin_55697644/article/details/130663625

版权

1.说一下http的请求方式？

2.GET和POSH请求的区别？

3.transition有那些属性？

4.讲一下transform的属性及应用？

5.CSS的响应式布局有哪些？

6.部署的流程，怎么解决跨域？

6.锚点链接的步骤：

1.说一下http的请求方式？

（1）GET请求：

GET方法是最常见也是最简单的http请求方法，它主要用作于获取资源。也就是说我客户端请求什么，你服务器就原样给我返回什么。我请求的是文本，你就保持原样返回；我请求的是像CGI那样的程序，你就给我返回运行结果。

（2）POST请求：

POST方法主要用来传输实体的主体。

也就是说，当客户端需要向服务器传输一些东西的时候呢，这个时候就可以用POST方法了。那GET方法可以不可以呢？当然也可以，但是我们不推荐使用GET方法来对实体的主体进行传输。

（3）PUT请求

PUT方法主要用来传输文件，就像FTP协议的文件上传一样。

但是由于Http/1.1的PUT方法不带验证机制，存在安全性问题，所以一般的网站都不用这个方法来进行文件传输。

（4）HEAD请求

HEAD请求主要用来获取报文首部

HEAD方法和GET方法一样，只不过不返回报文的主体部分。只是用来确定请求的有效性及资源的更新日期时间等

（5）DELETE请求

DELETE方法主要是用来删除某个资源，是和PUT完全相反的方法。

同时该方法也不带认证机制，所以一般网站并不会对它进行开放使用。

（6）OPTIONS请求

OPTIONS方法用来查询：请求的指定资源都支持什么http方法。

一般到这里说的挺多了然后面试官最喜欢问的就是

2.GET和POSH请求的区别？

这里我参考了W3C官方文档给的一切说法：

1.GET在浏览器回退时是无害的，而POST会再次提交请求。

2.GET产生的URL地址可以被Bookmark，而POST不可以。

3.GET请求会被浏览器主动cache，而POST不会，除非手动设置。

4.GET请求只能进行url编码，而POST支持多种编码方式。

5.GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。

6.GET请求在URL中传送的参数是有长度限制的，而POST么有。

7.对参数的数据类型，GET只接受ASCII字符，而POST没有限制。.

8.GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。

9.GET参数通过URL传递，POST放在Request body中。

3.transition有那些属性？

从一种状态过渡到另一种状态，用于在一定的时间内进行元素平滑的过渡，这种效果可以在元素被单击，鼠标滑过，或者是其他的事件中触发，实现圆滑的以动画效果改变CSS属性的属性值。

ransition属性是个复合属性，她包括以下几个子属性：

transition-property ：规定设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加

transition-duration ：规定完成过渡效果需要多少秒或毫秒

transition-timing-function ：指定过渡函数，规定速度效果的速度曲线常用值：关键字描述：linear ease-in ease-in-out

transition-delay ：指定开始出现的延迟时间

hover实现效果

div {
	width:200px;
  height:200px;
  background-color:red;
  transition:all .2s linear;   // all => 全部执行 200毫秒内执行完成 以线性方式执行
}

div:hover{
  background-color:yellow;
}

事件的形式进行trainstion属性添加

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 200px;
            top: 0px;
        }
    </style>
</head>

<body>

    <div class="box"></div>
    <button id="btn">点击进行transtion属性添加</button>
  
    <script>
     document.getElementById('btn').addEventListener('click', function () {
            var box = document.getElementsByClassName('box')[0]
            box.style.transition = 'all .5s linear'
                box.style.backgroundColor = 'yellow';
                box.style.top = '200px'
        })
    </script>
</body>

</html>

动画结束事件

当动画执行完成之后，dom元素会触发transitionend事件

4.讲一下transform的属性及应用？

1.translate(位移)

translate有三个属性值即x轴，y轴和z轴，语法：

Transform：translateX(apx) / translateY(bpx) / translateZ(cpx);

简写：transform：translate（apx，bpx，cpx）；

X,Y,Z表示x轴y轴和z轴；abc分别表示x轴，y轴和z轴偏移数值，可以为负数；

设置translate位移的元素是相对于自己原来的位置来改变位置，不脱离文档流，translate 位移时，默认原点是元素的中心位置。

2.scale(缩放)

transform：scale（1.5）；

表示元素放大1.5倍，如果要缩小0.5倍就将设为0.5即可，默认数值等于1。

也可以单独设置x轴的缩放和y轴的缩放，也可以将数值设置为负数

3.rotate（旋转）

Transform：rotateX/rotateY/rotateZ；/*rotate（旋转）*/

rotateX（30deg）表示元素沿着x轴做旋转，30deg表示要沿着x轴方向的顺时针旋转30度，将值设为负数则是逆时针旋转30度。

5.CSS的响应式布局有哪些？

1.rem 公式：页面元素的rem值=页面元素值（px）/html font-size字体大小

2.vw vh

3.em

6.部署的流程，怎么解决跨域？

同源策略： 是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源定义： 如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与 URL http://store.company.com/dir/page.html 的源进行对比的示例:

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.html	失败	主机不同