2025前端面试真题总结（四）

1、浏览器得到html之后怎么渲染

渲染流程总结：

1. HTML解析 → DOM树构建

2. CSS解析 → CSSOM树构建

3. DOM和CSSOM合并 → Render Tree渲染树构建

4. 布局（Layout）计算（回流）

• 浏览器根据渲染树中每个元素的尺寸、位置和样式计算出每个元素的准确位置

1. 绘制（Paint）

• 绘制阶段会根据布局阶段的信息，浏览器为每个元素渲染出实际的像素，绘制到屏幕上

1. 合成（Compositing）

2. 显示（Display）

性能优化：

为了提高性能，浏览器通常会进行一些优化：

• 缓存：静态资源（如图像、样式表、脚本文件）会被缓存，避免重复加载。

• GPU加速：浏览器会尽可能地使用 GPU 来加速图形渲染，特别是在处理动画时。

• 合成层：将页面分成多个图层，独立渲染，减少重绘和回流。

2、om，dom，bom，cssom都是什么

术语	全称	定义	主要功能
DOM	Document Object Model	表示网页的结构化文档模型，通过DOM，JavaScript可以动态地访问和修改页面的内容、结构和样式。	操控网页文档的结构、内容和节点（HTML元素）
BOM	Browser Object Model	表示浏览器环境的对象模型，允许JavaScript与浏览器进行交互，例如控制浏览器窗口、URL、历史记录等。	与浏览器相关的操作，如访问浏览器窗口、历史、URL等
CSSOM	CSS Object Model	是CSS样式的对象模型，允许JavaScript访问和修改页面的CSS样式（类似于DOM操作文档结构）。	动态操作和修改网页的样式表
OM	Object Model（通常泛指）	在某些上下文中，OM指代的是面向对象的模型，是浏览器内部使用的对象结构。一般不单独作为一项技术。	通常是指在特定环境下的对象操作模型，可能指DOM或其他对象

解释：

• DOM（文档对象模型） 是JavaScript与HTML页面交互的主要方式，允许对页面的内容进行动态操作。

• BOM（浏览器对象模型） 主要与浏览器环境进行交互，例如控制浏览器窗口、访问浏览器历史记录等。

• CSSOM（CSS对象模型） 用于操作页面的样式，类似于DOM操作HTML元素，JavaScript可以动态改变页面的CSS样式。

• OM（对象模型） 在某些情况下是对DOM、BOM等不同模型的泛称，它们都是以对象的形式代表页面或浏览器环境，方便程序进行操作。

3、缓存expire设置-1代表什么，

在HTTP缓存控制中，expire 设置为 -1 通常意味着该资源被视为过期或不可缓存。它告诉浏览器或代理服务器，该资源不应被缓存或是缓存已经过期，需要重新从服务器获取最新版本的内容。

具体含义：

• 当 Expire 或 Cache-Control 头中设置 -1，通常表示该资源在缓存中已经过期，或者根本不允许缓存。

• 在某些情况下，它也表示该资源的缓存时间是 立即过期，因此，浏览器每次请求都会重新请求该资源，而不会使用缓存。

示例：

• Expires: -1 或 Cache-Control: no-store：这两种设置都会告诉浏览器不要缓存该资源，或者即使缓存了，缓存也是立即过期的。

举例：

如果你设置 Expires: -1 或 Cache-Control: no-cache，浏览器每次请求该资源时都会向服务器发送请求，以确保获取到的是最新的内容。

小结：

• Expires: -1 表示缓存已经过期或不允许缓存，浏览器每次都会向服务器请求该资源。

4、怎么判断资源请求是同一个？

1. 请求的 URL（统一资源定位符）

资源的 URL 是最直观的标识，同样的 URL 通常指向同一资源。以下是判断的关键：

• 协议（如 HTTP 或 HTTPS）

• 域名（如 example.com）

• 路径（如 /images/logo.png）

• 查询参数（如 ?v=1.0）

• 哈希（如 #section1）

举例：

• https://example.com/images/logo.png?v=1 和 https://example.com/images/logo.png?v=2 是不同的请求，尽管它们指向同一个文件路径，查询参数不同。

2. 请求的 HTTP 方法

• GET 请求用于获取资源，而 POST、PUT 等方法用于修改或提交数据。

• 同一资源的不同请求方法通常不视为相同的请求。例如，GET 和 POST 对于同一 URL 可能表示不同的操作，虽然它们可能请求的是同一个基础资源。

3. 请求头（Headers）

请求的头部信息（如 Accept, User-Agent, Authorization 等）有时也能影响请求的结果，但它本身并不直接决定资源是否相同。然而，一些缓存策略（如 ETag、If-Modified-Since）会基于这些信息来判断资源是否变化。

4. 缓存标识符（Cache-Control 或 ETag）

• ETag：这是服务器生成的一个标识符，表示某个资源的版本。通过比较客户端请求时发送的 If-None-Match 和服务器返回的 ETag，可以判断资源是否发生变化。

• Cache-Control：如果资源具有缓存指令，可以利用这些信息判断资源是否应该重新请求。

5. Cookie 和会话

如果资源与用户的会话相关（例如登录用户的个人资料），浏览器会在请求时自动带上相关的 Cookie。相同的 URL 和不同的 Cookie 可能表示不同的请求资源。

6. Referer（来源页）

在某些情况下，判断请求是否相同还可以通过检查请求的来源（Referer）。例如，来自同一页面或从不同页面发起的请求，虽然是相同的 URL，但上下文不同。

7. 请求的时间戳（有时用于判断）

• 即使 URL 相同，如果请求的时间不同，服务器也可能会返回不同的响应。例如，基于日期、时间的动态内容生成会导致资源有所不同。

判断是否是同一资源的总结：

• URL 是最基本的判断标准，若 URL 相同并且方法一致，通常表示是同一个资源。

• 缓存相关信息（如 ETag 或 Cache-Control）可以帮助判断是否有变化。

• 请求方法 和 请求头信息 也可能影响同一资源的判定，尤其是在动态内容的情况下。

简单来说，通过 URL 和其他请求特征（如缓存标识）可以准确判断资源请求是否为同一资源。

5、客户端默认情况下是怎么进行缓存的

客户端缓存的机制主要依赖于 HTTP 协议中的缓存相关头部，通常由浏览器或其他客户端在请求和响应过程中自动处理。以下是客户端默认缓存的关键机制：

1. Cache-Control

• 这是最常见的缓存控制头，服务器通过它告诉客户端如何缓存响应。常见的 Cache-Control 指令包括：

  • public：响应可以被任何缓存（如浏览器或 CDN）缓存。

  • private：响应仅可以由客户端（浏览器）缓存，不能由共享缓存（如 CDN）缓存。

  • no-cache：强制客户端每次都去验证缓存，不能直接使用缓存。

  • no-store：完全不缓存响应。

  • max-age：设置缓存的有效时间，单位为秒。例如 max-age=3600 表示缓存有效期为 1 小时。

客户端会根据这些指令决定缓存行为。

2. Last-Modified 和 If-Modified-Since

• Last-Modified：这是服务器响应中带上的时间戳，表示资源最后一次修改的时间。

• If-Modified-Since：客户端在下次请求相同资源时会带上此头部，表示资源是否自上次请求后发生变化。如果服务器认为资源没有修改，它会返回 304 Not Modified 响应，告知客户端继续使用缓存。

3. ETag 和 If-None-Match

• ETag：这是服务器生成的唯一标识符（通常是文件内容的哈希值），它代表资源的版本。

• If-None-Match：客户端在请求时会带上这个头部，表示它拥有一个特定的版本。如果服务器返回的 ETag 和客户端的 ETag 匹配，表示资源没有变化，服务器会返回 304 状态码。

ETag 和 If-None-Match 机制通常比 Last-Modified 和 If-Modified-Since 更精确，因为它能够验证资源的精确版本。

4. Expires

• Expires 头部定义了资源的过期时间。它使用绝对时间格式，例如：Expires: Wed, 21 Oct 2025 07:28:00 GMT。表示资源在该时间之后过期。

在现代浏览器中，Expires 常常与 Cache-Control 一起使用，Cache-Control 提供更细粒度的控制，而 Expires 提供固定的过期时间。

5. 默认缓存行为

浏览器会根据这些缓存头部的指示来决定是否使用缓存资源。如果服务器没有提供明确的缓存指令，浏览器会使用一些默认策略进行缓存，但通常会缓存静态资源（如图片、CSS、JavaScript 文件）。

• 对于动态内容或没有缓存控制的资源，浏览器可能会通过发送条件请求（如 If-Modified-Since）来询问服务器是否有更新的资源。

• 对于静态资源，浏览器通常会在缓存过期之前直接使用本地缓存，从而减少对网络的请求，提升页面加载速度。

总结：

• 客户端缓存的核心通过 HTTP 头部，如 Cache-Control、Expires、Last-Modified 和 ETag 来实现。

• 强制缓存 和 协商缓存 是常见的两种缓存机制，决定了客户端是直接使用缓存还是与服务器进行验证。

这些机制帮助提高性能，减少带宽消耗，并优化用户体验。

6、状态码301，302，307代表什么

1. 301 Moved Permanently (永久重定向)

• 含义：表示请求的资源已经被永久移到新位置，未来所有的请求都应该使用新的 URL。

• 典型使用场景：网站或页面的永久重定向（如域名更改或页面移动）。

• 客户端行为：浏览器会自动跳转到新的 URL，且会将新的 URL 缓存起来。搜索引擎会更新索引。

2. 302 Found (临时重定向)

• 含义：表示请求的资源临时被移动到新的 URL，客户端应继续使用原来的 URL 进行未来的请求。

• 典型使用场景：某些临时的重定向，网站进行 A/B 测试或临时维护。

• 客户端行为：浏览器会自动跳转到新 URL，但会保持原始 URL 不变，未来的请求会继续使用原 URL。

3. 307 Temporary Redirect (临时重定向)

• 含义：类似于 302，但它明确要求客户端使用原请求方法（如 POST、GET）重新发起请求，而不是使用默认的 GET 方法。

• 典型使用场景：需要临时重定向，并确保客户端不会改变请求方法（如 POST 保持 POST 请求）。

• 客户端行为：与 302 类似，但确保使用相同的 HTTP 方法进行请求。

---

其他常见的 HTTP 状态码

1xx - 信息性状态码

• 100 Continue：服务器已收到请求的初始部分，客户端应该继续发送请求的剩余部分。

• 101 Switching Protocols：服务器同意客户端请求的协议切换。

2xx - 成功状态码

• 200 OK：请求成功，服务器返回请求的资源。

• 201 Created：请求成功，并且服务器创建了新的资源。

• 204 No Content：请求成功，但没有返回任何内容（常用于删除操作）。

3xx - 重定向状态码

• 304 Not Modified：表示客户端缓存的资源没有变化，可以继续使用缓存的内容。

• 308 Permanent Redirect：与 301 类似，但明确要求客户端保持原请求方法。

4xx - 客户端错误状态码

• 400 Bad Request：请求无效或格式错误，服务器无法处理。

• 401 Unauthorized：请求需要用户认证，通常是需要登录。

• 403 Forbidden：服务器理解请求，但拒绝执行（无权限）。

• 404 Not Found：请求的资源不存在。

• 405 Method Not Allowed：请求方法不被允许（如使用 GET 请求一个不支持 GET 的 API）。

• 408 Request Timeout：请求超时，服务器没有收到完整的请求。

5xx - 服务器错误状态码

• 500 Internal Server Error：服务器内部错误，无法完成请求。

• 502 Bad Gateway：网关错误，表示上游服务器返回了无效的响应。

• 503 Service Unavailable：服务器暂时无法处理请求，通常是因为过载或维护。

• 504 Gateway Timeout：网关超时，服务器没有及时从上游服务器接收到响应。

7、构造函数怎么做继承，具体怎么实现

1. 使用传统构造函数和 prototype 来实现继承

在 JavaScript 中，传统的构造函数继承通常通过 prototype 来实现。通过将父类构造函数的原型对象赋给子类构造函数的原型，可以实现继承。

// 父类构造函数
function Animal(name) {
    this.name = name;
    console.log('Animal constructor called:', name);
}

// 子类构造函数
function Dog(name, breed) {
    // 调用父类构造函数
    Animal.call(this, name);  // 使用 call() 调用父类构造函数
    this.breed = breed;
    console.log('Dog constructor called:', breed);
}

// 设置继承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 测试
const dog = new Dog('Buddy', 'Golden Retriever');

解释：

• Animal.call(this, name)：通过 call 方法调用父类构造函数，将子类的 this 绑定到父类构造函数的上下文中，实现父类属性的初始化。

• Dog.prototype = Object.create(Animal.prototype)：使得 Dog 的原型对象继承自 Animal 的原型，从而可以继承父类实例方法。

• Dog.prototype.constructor = Dog：重设子类构造函数的指向，防止它被改变为 Animal。

2. 使用 class 和 extends 语法来实现继承

从 ES6 开始，JavaScript 引入了 class 关键字，使得继承更加简洁和直观。通过 extends 关键字，子类可以直接继承父类的构造函数和方法。

// 父类构造函数
class Animal {
    constructor(name) {
        this.name = name;
        console.log('Animal constructor called:', name);
    }
}

// 子类构造函数
class Dog extends Animal {
    constructor(name, breed) {
        // 调用父类构造函数
        super(name);  // super() 调用父类构造函数
        this.breed = breed;
        console.log('Dog constructor called:', breed);
    }
}

// 测试
const dog = new Dog('Buddy', 'Golden Retriever');

解释：

• super(name)：子类使用 super() 调用父类的构造函数，传递参数进行初始化。super 不仅可以调用父类的构造函数，还能在子类中使用父类的方法。

• extends：表示 Dog 继承自 Animal，子类可以访问父类的属性和方法。

3. 使用 Object.create() 来实现继承

除了传统的 prototype 和 class 语法，Object.create() 也可以用来实现继承。这个方法可以创建一个新对象，并将其原型设置为指定的对象。

// 父类构造函数
function Animal(name) {
    this.name = name;
    console.log('Animal constructor called:', name);
}

// 子类构造函数
function Dog(name, breed) {
    Animal.call(this, name);  // 调用父类构造函数
    this.breed = breed;
    console.log('Dog constructor called:', breed);
}

// 设置继承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 测试
const dog = new Dog('Buddy', 'Golden Retriever');

解释：

• Object.create(Animal.prototype) 创建了一个新的对象，并将其原型指向父类的原型，从而继承父类的方法。

• Dog.prototype.constructor = Dog 重设子类构造函数的 constructor 属性，确保它指向 Dog。

总结

在 JavaScript 中，构造函数的继承可以通过以下几种方式实现：

1. 使用传统构造函数和 prototype：通过 call() 调用父类构造函数，并使用 Object.create() 或手动设置原型来实现继承。

2. 使用 class 和 extends（推荐）：这是 ES6 引入的简洁语法，通过 super() 调用父类构造函数，extends 关键字实现继承。

3. 使用 Object.create()：通过 Object.create() 创建新对象并设置原型继承，通常搭配传统构造函数使用

8、浏览器自带的后退按钮要具体回到首页或者固定页面怎么实现

1. 使用 history.replaceState() 替换当前历史记录条目

history.replaceState() 允许你替换当前页面的历史记录条目。这样，用户点击浏览器的后退按钮时不会返回到当前页面，而是会跳转到你指定的页面（例如首页）。

示例：

// 替换当前历史记录条目为首页
history.replaceState(null, null, '/home'); // 跳转到首页

解释：

• history.replaceState() 修改了浏览器历史中的当前条目，因此在点击后退按钮时，用户会跳转到你指定的 URL（例如 /home），而不会回到当前页面。

• 这样，后退按钮将会带用户回到指定的页面，而不是当前页面。

2. 使用 window.location.replace() 强制跳转到首页

window.location.replace() 会强制浏览器加载新的页面，并且不会将当前页面添加到浏览器的历史记录中。这样，后退按钮就不会带用户返回当前页面，而是直接跳转到新的 URL。

示例：

// 强制跳转到首页
window.location.replace('/home');

解释：

• window.location.replace() 会跳转到指定的页面，并且会将当前页面从浏览器的历史记录中移除，因此后退按钮不会回到当前页面。

• 使用这种方法，你可以直接将用户带到一个固定的页面，而不会受到之前历史记录的影响。

9、超过宽度设置…，宽度不是固定的

宽度不是固定可设置当前盒子最大宽度就可以了

1、文本溢出显示省略号

.calss{
  white-space: nowrap;         /* 防止文本换行 */
  overflow: hidden;            /* 隐藏超出的部分 */
  text-overflow: ellipsis;     /* 超出部分显示省略号 */
}

2、使用 flexbox 和 text-overflow 实现多行溢出省略号（需要额外的样式）

<div class="multi-line-ellipsis">
  这是一段很长的文本，会在多行显示后超出容器并显示省略号。
</div>

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3;       /* 显示3行文本 */
  -webkit-box-orient: vertical; /* 必须设置为垂直排列 */
  overflow: hidden;            /* 隐藏超出的部分 */
  text-overflow: ellipsis;     /* 超出部分显示省略号 */
  max-width: 100%;             /* 自适应父容器宽度 */
}

• -webkit-line-clamp: 设置文本行数的上限，当文本行数超过指定值时，超出部分将被省略。

• -webkit-box-orient: vertical: 定义文本框为垂直排列（允许多行显示）。

• text-overflow: ellipsis: 使超出部分显示省略号。

• overflow: hidden: 隐藏超出的部分，避免显示不完整的文本。

总结：

• 对于单行文本溢出显示省略号，使用 text-overflow: ellipsis 配合 overflow: hidden 和 white-space: nowrap 即可。

• 对于多行文本溢出显示省略号，可以使用 -webkit-line-clamp 实现限制行数并显示省略号。

10、sessionStorage怎么同域（跨标签页）共享

sessionStorage 默认是无法直接跨标签页共享的。

• 方法一：window.open()方法打开这个同源tab页即可实现sessionStorage的有效共享。

• 方法二：通过window.addEventListener('storage', () => {})事件监听，来进行同源跨tab页的数据共享

11、服务端setcookie后，同域下都是可以访问到的吗

同域但不同项目下，能否访问到服务端设置的 Set-Cookie，取决于 cookie 的 Domain 和 Path 设置。

1. 同域：

   • 如果不同项目在同一个顶级域名下（例如，www.example.com 和 api.example.com），那么在默认情况下，只有 Domain 配置为 .example.com 的 cookie，才会在这两个子域中共享。

   • 如果 cookie 的 Domain 只设置为 www.example.com 或 api.example.com，那么它只会在对应的子域名下访问到。

2. Domain 和 Path 配置：

   • Domain：如果服务端设置了 Domain=example.com，那么同域下的所有子域名（如 www.example.com、api.example.com）都能共享这个 cookie。

   • 如果没有设置 Domain，cookie 会仅限于当前的具体域名（如 www.example.com），不同项目下（如 api.example.com）的页面将无法访问到该 cookie。

   • Path：设置 Path 来限定 cookie 的有效路径。比如，Path=/admin 的 cookie 只会在 /admin 路径下生效，其他路径无法访问到。

3. 不同项目的“不同项目”理解：

   • 如果你指的是不同的应用（例如，www.example.com 和 shop.example.com），这些属于同一个顶级域名下，但会根据 cookie 的 Domain 设置是否共享。

   • 如果不同项目指的是同一域名下不同路径（例如，www.example.com 和 api.example.com），也要看 Domain 和 Path 设置。

4. SameSite 的影响：

   • SameSite 属性控制 cookies 在跨站请求中的行为。如果设置了 SameSite=Strict 或 SameSite=Lax，它不会影响同域名下的不同项目。

   • SameSite=None 允许跨站请求携带 cookie，但同域下的不同项目不受此影响。

12、ajax是宏任务还是微任务，和setTimeout哪个先执行

1. AJAX 是宏任务还是微任务？

AJAX 请求的回调是 宏任务。

• 在浏览器中，AJAX 请求是通过 浏览器的事件循环机制来管理的。当 AJAX 请求完成时，它会将回调放入 事件队列，属于 宏任务，等待主线程空闲时执行。

• 这意味着 AJAX 的回调并不是立即执行的，而是等待当前的执行栈和所有微任务队列清空后才会执行。

2. setTimeout 是宏任务还是微任务？

setTimeout 也是 宏任务。

• setTimeout 会将指定的回调函数放入 宏任务队列，并在指定的延迟时间后执行。它并不会立即执行，而是会在当前任务执行完成并且微任务队列清空之后执行。

3. AJAX 和 setTimeout 哪个先执行？

由于 AJAX 和 setTimeout 都是 宏任务，它们的执行顺序取决于它们进入宏任务队列的时机和延迟。

• 如果 setTimeout 的延迟时间为 0，它会被推入宏任务队列并等待主线程和微任务队列都清空后执行。

• AJAX 请求的回调是由浏览器的事件循环管理的，它会在 AJAX 请求完成后被放入宏任务队列中。

如果两个任务几乎同时进入队列，它们的执行顺序通常是：先进入队列的任务先执行，但 setTimeout 的回调会在当前宏任务执行完后优先于 AJAX 回调执行，因为它的延迟时间可能是 0。

总结：

• AJAX 和 setTimeout 都是宏任务。
• 它们的执行顺序由事件循环和任务队列的安排决定。通常情况下，setTimeout 的回调会在 AJAX 完成的回调之前执行，尤其是当 setTimeout 延迟为 0 时。

13、移动端有什么印象比较深刻的问题（随手写了两个比较简单的可自己多准备一下别的）

1. ‌1px边框模糊问题‌
   在高清屏（Retina屏）中，1px物理像素可能显示为多倍逻辑像素，导致边框过粗或模糊。
   ‌解决方案‌：

   • 使用伪元素 + transform: scale(0.5)缩小线条‌。

   • 通过border-image或background-image生成细线‌。

2. ‌多设备布局适配‌
   面试官常要求说明不同屏幕尺寸（如手机、平板、折叠屏）的适配方案。
   ‌实现方式‌：

   • ‌Viewport配置‌：<meta name="viewport" content="width=device-width, initial-scale=1.0">‌。

   • ‌动态REM方案‌：结合flexible.js动态设置根字体大小，用rem单位实现等比缩放‌。

   • ‌Flex/Grid布局‌：弹性布局优先处理复杂排列场景‌。

14、block怎么变为复合图层

什么是复合图层？

浏览器的渲染引擎会将页面中的元素渲染成多个图层，而复合图层通常用于处理一些比较复杂的元素（如需要动画、变换或者 3D 效果的元素）。这些元素会被提升到一个单独的图层上，这样做的好处是可以单独更新该图层，避免整个页面重绘，提高性能。

通常，元素成为复合图层的情况有：

1. 应用 CSS 动画：当某个元素有 CSS 动画（尤其是涉及到 transform、opacity 等属性）时，浏览器可能会将其提升为独立的复合图层，这样动画的执行就不会影响到其他页面内容。

2. CSS 变换（transform）和透明度（opacity）：这些 CSS 属性会触发浏览器将元素提升到独立的图层上。

3. 3D 转换：例如，使用 transform: translate3d() 等 3D 变换，浏览器会为此元素创建一个复合图层，利用 GPU 加速绘制。

4. CSS will-change 属性：使用 will-change 可以告诉浏览器将来某个元素可能会发生变化，提前将该元素提升为复合图层，从而减少渲染时的性能损耗。

如何使块级元素（block）成为复合图层？

要让块级元素（<div>、<section> 等）成为复合图层，可以通过以下几种常见方法：

1. 使用 transform: 使用 transform（例如 transform: translate3d(0, 0, 0)）让元素成为复合图层。即使元素没有位移或旋转，浏览器也会将其提升为复合图层。

2. 使用 will-change: will-change 属性可以告诉浏览器未来某个元素将会发生变动。通过指定将来可能变化的属性，浏览器会提前优化该元素的渲染，通常是将其提升为独立图层。

3. 使用 opacity: 当元素有 opacity 属性的变化时，浏览器也可能将其提升为复合图层。

4. 使用 position: fixed 或 position: absolute: 在某些情况下，使用 position: fixed 或 position: absolute 也会使元素被提升为独立的图层，尤其是配合 transform 或 opacity 一起使用时。

15、block怎么变为BFC

什么是 BFC（Block Formatting Context）？

BFC 是一个可视化的容器，里面的元素按照一定的规则进行布局，这些规则会限制它们与外部元素的相互影响。具体来说，BFC 主要有以下几个特征：

1. 内部浮动元素不会影响外部元素： 在一个 BFC 中，浮动元素不会影响到外部元素的位置，BFC 内的浮动元素不会扩展到外部，外部的元素也不会靠近 BFC 内的浮动元素。

2. BFC 内的元素不会影响外部元素的布局： BFC 中的元素之间的布局是独立于外部元素的，BFC 的存在可以解决例如浮动元素的重叠问题。

3. 清除浮动： 如果某个容器包含浮动元素，那么该容器的高度将不会自动适应浮动元素的高度，导致布局问题。为了避免这种情况，可以通过创建 BFC 来确保容器正确包裹浮动元素。

4. 堆叠上下文的形成： 如果你使用了某些 CSS 属性（如 position 为 absolute 或 relative、float、display: flex、overflow 等），BFC 会影响这些元素的堆叠顺序和布局。

如何将一个元素变为 BFC？

要将一个普通的元素变为 BFC，你只需要通过 CSS 设置某些属性来激活 BFC。最常见的几种方法如下：

1. 设置 overflow： 设置 overflow 为 hidden、auto 或 scroll 会使元素成为 BFC。

2. 设置 position： 通过设置 position: absolute 或 position: fixed，元素会成为 BFC。

3. 设置 display： 将元素的 display 设置为 flex、grid、inline-block 或 table 等值，会让该元素成为 BFC。

4. 使用 float： 设置 float 为 left 或 right，也会使元素成为 BFC。

BFC 的实际应用：

1. 清除浮动： BFC 可以用来清除浮动，避免父元素的高度被浮动子元素所影响。常见的做法是给父元素设置 overflow: hidden 或 clear: both。

2. 防止元素重叠： BFC 能避免一些布局上的重叠问题，尤其是在浮动布局时，创建一个 BFC 作用区域可以防止元素错位或重叠。

3. 自适应高度： 使用 BFC 来确保包含浮动元素的容器自动调整其高度，解决浮动元素溢出容器的问题。

16、关键帧动画的六个时间点

0%、16.66%、33.33%、50%、66.66%、100%。

尽管 CSS 动画的关键帧时间点不一定非得有六个，但你可以根据动画需要设置多个时间点来定义不同的动画阶段。这种方式帮助你控制动画的不同时间段以及每个阶段的样式变化。

17、登录时密码怎么加密，服务器端拿到怎么解密

前端md5加密（MD5, SHA-1, SHA-256），新的加密方法rsa，RSA是一种非对称加密,客户端通过公钥进行加密，服务端通过私钥进行解密，也就是说公钥并不能进行解密，因此进行明文传输也是安全的。
后端接收到前端加密后的密码后，需要对其进行验证。

常用的验证方式有两种：

第一种方式是后端再次对用户密码进行加密，然后将加密后的结果与前端发来的密文进行比较，如果相同则验证通过；

第二种方式是通过将用户的密码与数据库中的密码进行比较，如果相同则验证通过。

第二种方式更加安全，因为其比较的是明文密码。

18、对称加密、非对称加密、md5加密、hash算法

MD5不是加密算法，md5实际上既不是对称算法，也不是非对称加密算法。它是消息摘要（安全散列）算法。MD5是hash算法的一种
Hash算法它通过一个算法，把任意长度的数据转换为一个长度固定的数据串。
Hash算法特别的地方在于它是一种单向算法，用户可以通过Hash算法对目标信息生成一段特定长度的唯一的Hash值，却不能通过这个Hash值重新获得目标信息。因此Hash算法常用在不可还原的密码存储、信息完整性校验等。