|面试flex是哪几个属性的综合写法 flex-grow默认为1 flex-shrink默认为1 flex-basis默

flex是哪几个属性的综合写法

flex是（flex-grow,flex-shrink,flex-basis）三个属性的简写形式。

有两个快捷值auto（1 1 auto）和none（0 0 auto）

flex-grow`默认为1`

如果存在剩余空间，是否放大元素。 0为不放大其他数值则为放大的比例例如 2 则占剩余空间的2份

flex-shrink`默认为1`

如果空间不足，则将项目缩小。 0为不缩小。其他数组则为缩小所占的份数。

flex-basis`默认为auto`

设置后项目将占据固定元素。例如flex-basis：500px 相当于width：500px；

代码

   <style>
        .container {
            width: 600px;
            height: 600px;
            display: flex;
            background-color: pink;
        }
        .left {
            /* 设置占主轴的大小和width：500px一样的效果 设置后项目将占据固定空间。*/
            flex-basis: 500px;
            /* 默认为1，当空间不足时， 会自动缩小。如果设置为0则代表不会缩小宽度*/
            flex-shrink: 0;
            /* width: 200px; */
            background:red;
        }
        .container div {
            width: 300px;
        }
        .left {
        }
        .right {
            /* flex-grow: 1; */
            /* flex-grow: 0;   默认为0，0为不放大，1是有剩余空间放大 */
            /* flex:1; */
            background-color: cyan;
        }
        .three {
            flex-shrink: 1;
            /* 代表剩余空间站三份 */
            /* flex-grow: 3; */
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right">

        </div>
        <div class="three"></div>
    </div>
</body>
</html>

cookie是干什么用的？

cookie的定义

HTTP是无状态的协议，即HTTP协议本身不对请求和响应之间的通信状态进行保存，为了实现期望的保存状态功能，引入了cookie技术

cookie是存储在用户浏览器的一段超过4kb的字符串。它由一个名称，一个值和其他几个用于控制cookie有效期、安全性使用范围的可选属组成的。

cookie的几大特性

自动发送
域名独立，每个域名使用独立的cookie
过期时限
4kb限制

cookie的作用

第一次登录成功后，服务器通过响应头，发送cookie给浏览器。自动把cookie保存在浏览器中。

当客户端浏览器每次请求时，浏览器自动把身份认证相关的cookie，通过请求头的形式发送给服务器，然后服务器响应用户对应的内容。

session认证和JWT的区别，为什么越来越多的场景使用JWT？

session认证

用户登录成功之后，把用户的信息存在服务端session中。

session认证的局限性

session认证需要配合cookie才能实现，由于cookie不支持跨域访问，所以，当涉及到前端跨域请求后端接口的时候需要做很多的配置，才能实现跨域session认证。

JWT认证（跨域认证解决方案）

session认证用户信息保存在服务器端的session中，而jwt是保存在浏览器端，token中的payload部分就是用户信息加密过的信息。

Object.keys()和for in的区别？

两者之间最主要的区别就是Object.keys( )不会走原型链，而for in 会走原型链；

obj.hasOwnProperty()可以判断是实例的属性还是原型链的属性

let obj = {
    a:1,
    b:2,
}
Object.prototype.test = 2;
console.log(Object.keys(obj));  //['a','b']
for(let i in obj) {
    console.log(i);     //a b test
}

console.log(obj);

em和rem的区别以及应用场景

区别： em：相对于父元素的字体大小进行计算。如果一个元素的字体大小为1em，那么它将与其父元素的字体大小相等。

rem：相对于根元素（通常是HTML元素）的字体大小进行计算。如果根元素的字体大小是16px，那么1rem将等于16px。

应用场景：

em：适合在嵌套层级比较多的情况下使用，可以根据父元素的字体大小进行相对调整。比如，在一个文章页面中，标题、段落、子标题等元素的字体大小可能需要根据父元素的字体大小来调整，这时候可以使用em单位。
rem：适合在整个页面中统一设置字体大小的情况下使用。通过设置根元素的字体大小，可以方便地控制整个页面的字体大小，而不需要逐个元素进行调整。这在响应式设计中特别有用，可以根据设备尺寸或用户偏好动态调整根元素的字体大小，从而实现页面的自适应。

综上所述，em适用于局部调整字体大小的场景，rem适用于全局统一字体(或者页面自适应)大小的场景。

鉴权？

后端图片为什么要base64位？但是返回的却是二进制流呢？

返回照片的优劣势：

优势：

照片可以直接显示，方便用户查看和使用。
照片可以在不同设备上进行保存和分享。
照片可以以原始质量保存，保证图像质量。

劣势：

返回大量照片会占用大量存储空间和带宽。
传输速度慢，需要等待加载完成后才能使用。
对于一些特殊场景，如人脸识别等，可能需要对照片进行进一步处理，增加了计算资源的消耗。

二进制数据流的优劣势：

优势：

可以直接读取和操作，适合一些需要进行数据处理的场景。
数据流可以通过网络传输，省去了照片的存储和传输，节省了存储和带宽成本。

劣势：

需要经过复杂的编码和解码过程，增加了程序的复杂度和运行时间。
无法直接显示，可能需要再次转换为图像格式才能使用。

Base64的优劣势：

优势：

可以将二进制数据流转换为字符串输出，方便传输和保存。
压缩数据大小，减少网络传输的带宽消耗。

劣势：

转换过程会增加数据大小，造成一定的性能损失。
需要再次进行解码才能使用。

选择上，根据不同的场景和需求来决定。如果需要直接显示图片，建议返回照片；如果需要对图像进行处理，建议使用二进制数据流；如果需要节省带宽消耗，建议使用Base64。

总结

因为在得到了图片的字节流byte[ ]后，不会在json中直接传输byte[ ]，因为担心传输过程中，有服务对其进行隐式编码然后解码，这就导致字节流发生了变化，所以我们在传输源头就进行base64编码，因为base64使用的ASCII编码是所有编码方式都支持的，即使传输过程中有服务对其进行编解码，也能原样还原。所以使用base64编码是一种安全策略，但是base64会导致体积增大约三分之一。

结合二进制流的优点，节省了存储成本和带宽成本。

而后端返回二进制流可能是因为可以有效减少数据传输的大小，提高数据传输的效率

|面试