一、HTTP HTTPS 的区别

(1)HTTP HTTPS简述

HTTP 全称(Hyper Text Transfer Protocol)，就是超文本传输协议，用来在 Internet 上传送超文本。是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准(TCP)，用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS 安全超文本传输协议。简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。

HTTPS 的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。

超文本传输协议 HTTP 被用于 Web 浏览器和网站服务器之间传递信息，HTTP 以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了 Web 浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。因此，HTTP 不适合传输敏感信息，比如：资金账户、密码等。为了解决 HTTP 的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议 HTTPS，为了数据传输的安全，HTTPS 在 HTTP 的基础上加入了 SSL 协议，SSL 依靠证书来验证服务器的身份，并为浏览器和服务器之间的通信加密。

(2)HTTP HTTPS 的区别

HTTP 传输的数据都是未加密的，也就是明文的，因此使用 HTTP 传输信息非常不安全。为了保证数据能加密传输，网景公司设计了 SSL(Secure Sockets Layer) 协议用于对 HTTP 传输的数据进行加密，从而就诞生了 HTTPS。二者主要区别如下：

  1. 安全性： HTTP传输数据时不加密，使数据容易被拦截和窃取。而HTTPS通过使用SSL（Secure Sockets Layer）或TLS（Transport Layer Security）协议来加密数据传输，从而更安全地保护数据隐私。

  2. 加密： HTTPS使用公钥和私钥的加密方法，确保数据在传输过程中保持机密性。这使得中间人攻击变得困难，因为窃听者无法轻易解密和读取数据。

  3. 认证： HTTPS还提供了身份认证的功能。通过SSL证书，网站可以证明其身份，确保用户连接到正确的服务器，而不是被欺骗到恶意站点。HTTPS 需要到 ca 申请证书，一般免费证书较少，因而需要一定费用。

  4. 端口： HTTP默认使用端口80进行通信，而HTTPS默认使用端口443。

总而言之，HTTPS相对于HTTP更安全，适用于传输敏感信息，如密码、支付信息等。因此，现代网站通常都采用HTTPS来确保用户数据的保密性和安全性。

二、盒子模型，什么是怪异盒子模型，如果盒子内部元素设置了margin属性，怎么让盒子不出现滚动条

盒子模型是用于描述网页上元素布局和定位的概念。每个HTML元素都被看作一个矩形的盒子，包括内容、内边距、边框和外边距。这些部分共同构成了元素的尺寸和位置。

怪异盒子模型（Quirks Box Model）是指在一些老旧的浏览器中，元素的盒子模型计算方式与标准的CSS盒子模型有所不同，导致在布局时出现一些不一致的情况。

如果盒子内部的元素设置了margin属性，可能会导致盒子的宽度或高度增加，从而出现滚动条。要避免这种情况，可以考虑以下方法：

  1. 使用box-sizing属性： 将盒子的box-sizing属性设置为border-box，这样设置内外边距不会改变盒子的总尺寸，有助于避免滚动条出现。

    1
    2
    3
    .your-box {
      box-sizing: border-box;
    }

  2. 使用padding代替margin： 如果可能的话，尝试使用padding代替margin来增加元素之间的间距。padding不会影响盒子的尺寸，有助于避免出现滚动条。

  3. 使用overflow属性： 可以设置盒子的overflow属性为hidden，这样任何溢出的内容都会被隐藏，而不会显示滚动条。

    1
    2
    3
    .your-box {
      overflow: hidden;
    }

通过以上方法，你可以有效地避免因为设置了margin属性而导致盒子出现滚动条的情况。

三、data为什么是函数而不是对象

在JavaScript中，data 通常是一个变量名，它可以引用任何类型的值，包括对象、函数、数组等等。你可能会看到 data 被赋值为函数的情况，这是因为在某些上下文中，函数可以用作数据的一种形式，具有很多有用的特性。

  1. 函数是一等公民： 在JavaScript中，函数被称为一等公民（First-Class Functions），这意味着它们可以像其他数据类型一样被传递给变量、函数参数和返回值。因此，将函数赋值给 data 变量就是在将函数作为数据存储起来。

  2. 高阶函数： 函数可以接受其他函数作为参数或返回函数，这种用法称为高阶函数。将函数存储在 data 变量中可以使其成为高阶函数的一部分。

  3. 闭包： 函数可以形成闭包，即函数内部可以访问外部作用域中的变量。这种特性使得函数可以存储并携带特定的上下文信息。

  4. 代码复用和模块化： 将函数赋值给 data 变量可能是为了将某些可重用的代码逻辑保存下来，以便在需要的时候调用。

总之，将函数赋值给 data 变量是因为函数在JavaScript中具有多种灵活且强大的用途，它们可以被视为一种特殊的数据类型，可以用于各种编程范式，例如面向对象编程、函数式编程等。

四、flex布局介绍

Flex布局（Flexbox）是一种用于在一个容器中进行灵活的布局的CSS技术。它允许你在一维空间（水平或垂直）内排列元素，以实现更好的对齐和分布。通过使用flex容器和flex项目，你可以轻松地创建自适应且可伸缩的布局。

要创建一个Flex布局，首先需要将一个元素声明为flex容器，通过设置其display属性为flex或inline-flex。然后，内部的子元素就成为了flex项目，你可以使用一系列的属性来控制它们的布局，包括：

  1. flex-direction：决定项目的主轴方向，可以是row（水平）、column（垂直）、row-reverse或column-reverse。
  2. justify-content：定义主轴上项目的对齐方式，比如居中、开始对齐、结束对齐等。
  3. align-items：定义交叉轴上项目的对齐方式，比如居中、顶部对齐、底部对齐等。
  4. align-self：类似于align-items，但用于单个项目，可以覆盖其父容器的align-items设置。
  5. flex-grow、flex-shrink、flex-basis：用于控制项目在剩余空间中的伸缩行为。
  6. align-content：在有多行时，定义行与行之间的对齐方式。

例如，以下是一个简单的Flex布局示例：

1
2
3
4
5
6
7
8
9
10
11
12
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

这将创建一个具有弹性的容器，其中的项目会在水平方向上平均分布，并且在交叉轴上居中对齐。

Flex布局是一个强大且灵活的工具，可以用于创建各种各样的布局结构，从简单的导航栏到复杂的网格系统。

css垂直居中

要在CSS中实现垂直居中，您可以使用以下方法之一：

  1. 使用Flexbox：
1
2
3
4
5
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
  1. 使用Grid布局：
1
2
3
4
.container {
  display: grid;
  place-items: center; /* 居中内容 */
}
  1. 使用绝对定位：
1
2
3
4
5
6
7
8
9
10
11
.container {
  position: relative;
}


.centered-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Vue2 和 Vue3 是两个不同版本的Vue.js框架，主要用于构建用户界面。它们有以下一些主要区别：

  1. 性能优化： Vue3 在内部进行了重写，采用了更高效的虚拟DOM算法，使得性能有了显著提升，特别是在大规模数据更新时。

  2. Composition API： Vue3引入了Composition API，它使得组件逻辑更具可组合性和可维护性。相比于Vue2的Options API，Composition API更能帮助开发者组织和共享逻辑。

  3. 响应式系统： Vue3的响应式系统进行了重构，使其更加高效和灵活。这使得开发者能够更好地控制数据的响应式更新。

  4. TypeScript支持： Vue3对TypeScript的支持更加友好，提供了更准确的类型声明，从而帮助开发者在开发过程中减少错误。

  5. Teleport： Vue3引入了Teleport特性，这使得开发者能够更容易地在组件的DOM结构之外渲染内容，有助于处理弹出框、模态框等场景。

  6. Fragment和Portals： Vue3引入了Fragment和Portals，这些特性使得组件的DOM结构更加灵活，能够更好地满足不同的布局需求。

  7. 全局API修改： Vue3中一些全局API的命名和用法发生了变化，需要开发者注意适应。

总之，Vue3在性能、开发体验、可维护性等方面都有所改进和提升，但需要注意迁移时可能需要调整一些代码和概念。

解决跨域问题的方式有以下几种：

  1. CORS（跨域资源共享）： 最常见且推荐的解决跨域问题的方式是在服务器端设置CORS头部。通过在服务器响应中添加正确的CORS头部信息，可以允许指定的域名或所有域名的请求访问资源。

  2. JSONP（JSON with Padding）： JSONP是一种通过添加一个<script>标签来实现跨域请求的方法。它通常用于从不同域名的服务器获取JSON数据，但它有一些安全风险需要注意。

  3. 代理服务器： 可以设置一个代理服务器，将浏览器的请求发送到该代理服务器，然后由代理服务器再请求目标服务器的资源，最后将资源返回给浏览器。这种方式需要在服务器端设置代理，并且需要确保代理服务器与目标服务器之间没有跨域问题。

  4. WebSocket： 如果你的应用需要实时数据通信，可以考虑使用WebSocket协议，它可以在浏览器和服务器之间建立持久性的双向连接，不会受到同源策略的限制。

  5. 跨域资源嵌入（Cross-Origin Resource Inclusion，CORS）： 使用<link>, <img>, <script>等标签时，可以指定crossorigin属性来控制是否允许跨域加载资源。

  6. PostMessage API： 在不同窗口或iframe之间使用window.postMessage() API来进行跨域通信，可以实现一些简单的跨域数据传输。

  7. 服务器代理： 通过在自己的服务器上设置一个中间层，实现将跨域请求转发到目标服务器，然后将响应返回给前端。这种方式可以通过服务器端代码来处理跨域问题，而不是依赖于浏览器。

需要根据实际情况选择适合的解决方案，并注意确保安全性和数据完整性。