金山办公前端二面

金山办公前端二面_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如何实现？

<div class="card-container"><div class="card">Card 1</div><div class="card">Card 2</div><div class="card">Card 3</div><div class="card">Card 4</div><div class="card">Card 5</div><div class="card">Card 6</div>
</div>

.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整个过程

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