箭头函数
箭头函数是 ES6 中新增的一种函数定义方式，它有以下特点：
- 箭头函数使用箭头(=>)来代替 function 关键字来定义函数。
- 箭头函数不具备
this, arguments, super 和 new.target绑定，它们的指向由上下文决定。 - 当箭头函数只包含一个参数时，可以省略圆括号；当函数体只有一条语句时，可以省略花括号和 return 关键字。
以下是箭头函数的语法格式：
// 不带参数的箭头函数 () => { // 函数体 }; // 带参数的箭头函数 (param1, param2) => { // 函数体 }; // 只有一个参数的箭头函数，可以省略括号 param => { // 函数体 }; // 函数体只有一条语句时 param => statement;
举个例子：
// 传统函数定义方式 function add(a, b) { return a + b; } // 箭头函数 const add = (a, b) => a + b;
需要注意的是，箭头函数在使用时需要注意其中的 this 指向与传统函数定义方式是不同的，需谨慎使用。
Css盒模型
CSS盒模型是用于布局和渲染网页元素的基本概念。它将每个HTML元素表示为一个矩形框，该框包含内容、内边距、边框和外边距。
CSS盒模型包括以下几个要素：
- 内容（Content）：指元素内部的实际内容，例如文本、图像等。
- 内边距（Padding）：围绕在内容区域的空白区域，用于分离内容与边框之间的距离。
- 边框（Border）：包围在内边距外部的线条，用于定义元素的边界。
- 外边距（Margin）：位于边框之外的空白区域，用于控制元素与其他元素之间的距离。
CSS盒模型的两种常见表示方式：
- 标准盒模型（content-box）：元素的宽度和高度仅包括内容区域，不包括内边距、边框和外边距。
- IE盒模型（border-box）：元素的宽度和高度包括内容区域、内边距和边框，而外边距不计入宽度和高度。
在CSS中，可以使用相关属性来控制和调整盒模型的各个部分，例如：
- width和height属性：用于设置元素的宽度和高度。
- padding属性：用于设置内边距。
- border属性：用于设置边框的样式、宽度和颜色。
- margin属性：用于设置外边距。
Flex布局中的属性
在 CSS 中，Flex 布局是一种强大的布局模型，用于创建灵活的、自适应的容器和项目排列。以下是一些常用的 Flex 布局属性：
display: flex;：将容器设置为 Flex 容器，其中的子元素将按照 Flex 规则进行排列。flex-direction：指定 Flex 容器的主轴方向，可以是row（默认，横向排列）、column（纵向排列）、row-reverse（横向反向排列）或column-reverse（纵向反向排列）。justify-content：定义 Flex 容器中的项目在主轴上的对齐方式。可以是flex-start（默认，左对齐）、flex-end（右对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）或space-around（每个项目两侧的间隔相等）等。align-items：定义 Flex 容器中的项目在交叉轴上的对齐方式。可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、baseline（基线对齐）或stretch（默认，拉伸填满容器高度）。flex-wrap：指定项目是否换行显示。默认情况下，项目会尽可能在一行显示，可以通过设置为wrap（换行显示）或nowrap（不换行）来改变默认行为。align-content：定义多行项目在交叉轴上的对齐方式。可以是flex-start（顶部对齐）、flex-end（底部对齐）、center（居中对齐）、space-between（两端对齐，项目之间的间隔相等）或space-around（每行两侧的间隔相等）等。flex：指定 Flex 项目的伸缩能力，是flex-grow（放大比例，默认为 0）、flex-shrink（缩小比例，默认为 1）加粗样式和flex-basis（项目初始大小，默认为 “auto”）的缩写形式。
这些仅是 Flex 布局的一些基本属性，还有很多其他属性可以用来调整和控制 Flex 容器和项目的行为。灵活运用这些属性可以创建出多样且适应性强的布局。
从请求到页面渲染发生了哪些事情
从发送请求到页面渲染完成的过程中，主要包括以下几个步骤：
DNS解析：浏览器首先会查询本地 DNS 缓存，如果缓存中没有对应的域名，浏览器会向本地 ISP 发送一条 DNS 查询请求，获取对应域名的 IP 地址。- 建立
TCP连接：在获取到目标服务器的 IP 地址之后，浏览器会尝试建立与目标服务器的 TCP 连接，这里使用三次握手的方式。 - 发送
HTTP请求：TCP 连接建立之后，浏览器就可以向服务器发送 HTTP 请求，请求中包括请求方法、请求 URL、请求头、请求体等信息。 - 服务器处理请求并返回 HTTP 响应：服务端接收到浏览器发来的请求之后，根据请求的具体内容进行处理，最终生成 HTTP 响应并发送回客户端。
- 浏览器解析 HTML 并构建 DOM 树：浏览器收到 HTTP 响应之后，就开始解析 HTML，并构建出对应的 DOM 树。
- 浏览器解析 CSS 并构建 CSSOM 树：在构建 DOM 树的同时，浏览器还会解析 HTML 中的 CSS 样式，生成对应的 CSSOM 树。CSSOM 树和 DOM 树结合起来就构成了渲染树。
- 渲染页面：根据渲染树进行页面布局，计算页面元素的位置和大小，最终将页面渲染显示到用户界面。
- 客户端执行 JavaScript：在页面渲染的同时，浏览器还会执行 HTML 中嵌入的 JavaScript 脚本，进行一些交互和动画效果的操作。
- TCP 连接关闭：当浏览器收到 HTTP 响应之后，TCP 连接会被关闭，页面渲染完成。
总的来说，从请求到页面渲染整个过程中，涉及许多环节，包括 DNS 解析、TCP 连接、HTTP 请求响应、HTML 解析和渲染、CSS 解析和渲染、JavaScript 执行等，每个环节都有其独特的作用，整个过程需要不同部分之间的共同配合完成。
