金山办公前端二面_10/04

问题：

（1）css的flex布局属性有哪些？详解CSS的Flex布局 - 知乎

css 设置为 flex 布局以后，子元素的float、clear和vertical-align 属性将失效。

容器的属性有6个，分别是：

flex-direction  flex-wrap  flex-flow  justify-content  align-items  align-content

① flex-direcion属性：

作用：控制主轴的方向  默认值：row

flex-direction: row | row-reverse | column | column-reverse;

② flex-wrap属性：

作用：默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。  默认值：nowrap

flex-wrap: nowrap | wrap | wrap-reverse;

③ flex-flow属性：

作用：该属性是flex-direction属性和flex-wrap属性的简写形式

默认值：row nowrap

④ justify-content属性：

作用：定义项目在主轴上的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around;

默认值：flex-start

⑤ align-items属性：

作用：定义项目在交叉轴上如何对齐。

align-items：flex-start | flex-end | center | baseline | stretch

默认值：flex-start

（2）6个卡片，每行3个，flex如何实现？

  
Card 1
  
Card 2
  
Card 3
  
Card 4
  
Card 5
  
Card 6

.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.card {
    width: 30%;
    margin-bottom: 10px;
    background-color: #f0f0f0;
    padding: 10px;
}

• .card-container是一个容器，它被设置为flex容器，允许子元素进行弹性布局。
• flex-wrap: wrap;允许子元素在需要时换行，确保在小屏幕上也能正常显示。
• justify-content: space-between;将卡片在容器内水平分布，两端对齐。

（3）60个卡片呢？ 你刚刚方法可能不行，换60个呢？

（4）伪类的了解？

伪类是css中的一种选择器，它允许在特定的状态或条件下选择元素并为其应用样式。伪类通常以冒号(:) 开头，用于对元素的特定状态或行为进行定位和样式化。

选择器	描述
:hover	鼠标悬停时应用样式。常用于链接和交互元素。
:active	元素被激活（例如按钮被点击）时应用样式。
:focus	元素获得焦点时应用样式（通常用于表单元素）。
:visited	已访问链接的样式。
:nth-child(n)	选择父元素下的第n个子元素。
:nth-of-type(n)	选择特定类型的父元素下的第n个子元素。
:not(selector)	排除特定选择器的元素。
:first-child	选择父元素下的第一个子元素。
:last-child	选择父元素下的最后一个子元素。
:first-of-type	选择父元素下特定类型的第一个子元素。

（5）浏览器输入URL整个过程

1. 查询该域名的ip地址  下载浏览器本地缓存，如果浏览器有本地缓存，如果浏览器由本地缓存且未过期则返回结果； 否则向上一级 DNS 服务器（域名系统）查询，直到DNS根服务器；
2. 浏览器和服务器建立 TCP 连接；
3. 浏览器发送 HTTP 请求（三次握手）；
4. 服务器通过 HTTP 响应把首页的html文件发送给浏览器；
5. TCP释放连接（四次挥手）；
6. 浏览器首页解析 html 文件 并展示给用户；

（6）http2.0,1.1,1.0,3.0有啥区别吗？

（7）https加密过程

1. 浏览器请求 URL，找到服务器，向服务器发送请求。服务器将自己的整数（包含服务器公钥）、对称加密算法种类以及其他相关信息返回给浏览器。

2. 浏览器检测CA证书是否可依赖，确认证书有效。

3. 如果不是，给服务器发警告，询问是否可以继续使用。

4. 如果是，浏览器使用公钥加密一个随机对称秘钥，包含加密的 URL 一起发送给服务器。

5. 服务器用自己的密钥解密浏览器发送的钥匙，然后用这把对称加密的钥匙给浏览器请求的 URL 连接解密。

6. 服务器用浏览器发送的对称钥匙给请求的网页加密，浏览器使用相同的钥匙就可以解密网页。

（8）页面渲染有重绘 重排，这俩有了解吗？

（9）强缓存和协商缓存

（10）http的Keep-Alive？

• JS原型链
• 你对前端工程化的了解？
• webpack的一些原理？
• babel的了解？
• poltill，babel的 词语不知道怎么拼
• webpack的tree-摇的了解？
• 网络安全的xss，csrf？
• https为了防御什么攻击？
• 前端js排序底层是哪一种排序？
• 文档中有敏感词怎么办？
• 你的项目经验有web，react，vue哪个用得熟一点？
• 有了解vue的原理吗？
• 说一下数据的双向绑定？
• vue2 or vue3？
• vue3对2来说 架构上做的什么变化？
• 状态管理这块的理解？或者某个状态管理的理解，用来解决什么问题？
• 学习或者项目中遇到比较难的问题，自己怎么解决的？
• 为啥不用socket这种方式呢？
• 还有什么其他比较难得问题吗？
• 数据有嵌套怎么办呢？
• 数据比较多渲染成table，比较卡顿，有没有遇到这种问题？
• 前端如何做大数据量展示的优化？
• 反问，问了base、技术栈、产品