前端回忆（HTML4/5+CSS2/3+ES6+一点点js和vue）

fc&&fl

已于 2023-10-20 17:31:35 修改

阅读量277

点赞数

分类专栏：前端面试复习文章标签：前端笔记

于 2023-10-16 12:06:07 首次发布

本文链接：https://blog.csdn.net/m0_57057282/article/details/133852987

版权

前端面试复习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

最近在准备面试，于是打算将看到的觉得出现频率高的面试题记录下来，总结到后来就变成记录知识点了，/笑哭

1.列举内联元素和块级元素分别有哪些，他们有什么区别

内联元素（Inline Elements）：

<span>、<a>、<strong>、<em>、<img>、<input>、<button>

块级元素（Block Elements）：

<div>、<p>、<h1> - <h6>、<ul>、<ol>、<form>、<header>、<footer>、<nav>

区别总结：

内联元素不会独占一行，而块级元素会独占一行。
内联元素的宽度和高度由内容决定，而块级元素可以设置固定的宽度和高度。
内联元素不会强制换行，而块级元素会自动换行。
内联元素可以设置水平方向的内边距和外边距，但不会影响到垂直方向

2. 代码结果输出为

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);

由于使用了 var 声明的变量 i 是全局变量，setTimeout() 的回调函数会在循环结束后执行。因此，无论循环执行多少次，setTimeout() 的回调函数都会在循环结束时打印出最终的 i 值。所以，第一个循环结束后，会打印出三个连续的数字 3。

当var改为let时，由于使用了 let 声明的变量 i 是块级作用域的变量，每次循环都会创建一个新的 i 变量，并且每个 setTimeout() 的回调函数都会捕获到当前循环迭代的 i 值。因此，在每次循环中，setTimeout() 的回调函数会立即执行，并打印出当前的 i 值。所以，第二个循环会依次打印出 0、1、2。

3.get和post的区别

GET和POST是HTTP协议中最常见的两种请求方法，它们有以下区别：

参数方面（长度，写法）
- GET请求：将数据附加在URL的查询参数中，作为URL的一部分。例如：http://example.com/page?param1=value1&param2=value2，由于数据附加在URL中，受限于URL的最大长度限制。
- POST请求：将数据包含在请求的消息体中，不会显示在URL中，没有特定的数据长度限制，但服务器和应用程序可能会有自己的限制。
数据安全性：
- GET请求：数据以明文形式出现在URL中，可以被其他人在网络传输过程中进行截取和查看，因此不适合传输敏感信息。
- POST请求：数据包含在请求的消息体中，不会直接显示在URL中，相对于GET请求更安全，适合传输敏感信息。
数据类型：
- GET请求：主要用于获取数据，对服务器的资源进行读取操作，不应该对服务器产生副作用。
- POST请求：主要用于提交数据，对服务器的资源进行写入或修改操作，可能会对服务器产生副作用。
缓存：
- GET请求：可以被浏览器缓存，可以通过URL进行缓存和书签。
- POST请求：不能被浏览器缓存，因为每次提交的数据可能不同。
幂等性：
- GET请求：通常是幂等的，多次相同的GET请求对服务器没有副作用，只是获取相同的资源。
- POST请求：不是幂等的，多次相同的POST请求可能会对服务器产生不同的副作用，例如创建多个资源。

4. 事件传播的三个阶段执行顺序分别是什么

事件传播的三个阶段执行顺序分别是：

捕获阶段：从最外层的祖先元素向目标元素进行事件的捕获。但是默认此时不会触发事件。
目标阶段：事件捕获到目标元素，捕获结束开始在目标元素上触发事件。
冒泡阶段：事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件。

5.css盒子模型

盒子模型包括四个要素：元素实际内容（content）、内边距（padding）、外边距（margin）以及边框（border）。

盒子模型分为W3C盒子模型（标准盒模型）和IE盒子模型（怪异盒模型）。在标准盒模型中，width和height指的是内容区域content的宽度和高度；而在怪异盒模型中，width和height会包含padding和border。

6.css长度单位px，em，rem，vw，vh的区别

px是绝对单位，em和rem是相对单位。
em相对于父元素字体大小，rem相对于根元素字体大小。
vw和vh是相对于视口宽度和高度。（1:100）

7.如何让一个div块上下左右居中

1）使用 flexbox 布局：

2）使用绝对定位和负边距：

3）使用网格布局（Grid Layout）：

8.请删除数组中包含age:19的json对象。

var data= [{name: 'wang',age:18},{name: 'wang1' ,age:19},{name; 'wang2' , age:19},{name; 'wang3' ,age:18}]

var data = [
  {name: 'wang', age: 18},
  {name: 'wang1', age: 19},
  {name: 'wang2', age: 19},
  {name: 'wang3', age: 18}
];

data = data.filter(function(item) {
  return item.age !== 19;
});

console.log(data);

9.实现冒泡排序

function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len - 1; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                // 如果当前元素大于下一个元素，交换它们的位置
                let temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp;
            }
        }
    }
    return arr;
}

// 使用示例
let arr = [5, 3, 2, 4, 1];
console.log(bubbleSort(arr)); // 输出：[1, 2, 3, 4, 5]

10.null和defined的区别

undefined表示缺少值或未定义的变量，而null表示变量被赋予了一个空值。

11.axios请求和响应拦截器的大致用处

Axios 提供了请求拦截器和响应拦截器，它们可以用于在发送请求之前和接收到响应之后对请求和响应进行全局的处理和修改。

请求拦截器的主要用途包括：

添加认证信息：在发送请求之前，可以在请求头中添加认证信息，如添加 token、设置授权信息等。
请求参数处理：可以对请求参数进行加密、编码或格式化等处理，以符合后端的要求。
请求日志记录：可以记录请求的信息，如请求的 URL、请求方法、请求参数等，用于调试和日志记录。
错误处理：可以在请求发生错误时进行统一的错误处理，如网络错误、请求超时等。

响应拦截器的主要用途包括：

数据处理：对接收到的响应数据进行处理，如解析、格式化、过滤等，以符合应用程序的需求。
统一错误处理：可以对接收到的错误响应进行统一的错误处理，如处理错误状态码、错误消息等。
响应日志记录：可以记录响应的信息，如响应状态码、响应时间、响应数据等，用于调试和日志记录。
响应缓存：可以对响应进行缓存，以减少重复请求，提高性能。

12.Vue的全局前置路由守卫和后置路由守卫的用处

Vue的全局前置路由守卫和后置路由守卫：

用途：用于在路由导航之前和之后执行一些操作，如鉴权、路由跳转控制等。
功能：全局前置路由守卫在路由导航之前执行，可以用于进行鉴权、检查用户权限等操作，决定是否允许进行路由导航；全局后置路由守卫在路由导航之后执行，可以用于执行一些额外的操作，如页面滚动、执行统计等。
应用场景：适用于进行路由导航的控制和处理，如登录鉴权、路由跳转控制等。

13. render函数的用途

render函数在Vue中的作用是将组件的模板渲染为虚拟DOM，通过手动编写代码逻辑，可以实现动态渲染、精确控制、组件复用和性能优化等功能。它是Vue中实现高度灵活和可定制渲染的重要工具。

14.vue的全局属性，方法

全局属性：
- Vue.prototype.$data：访问根组件的数据对象。
- Vue.prototype.$props：访问根组件的props。
- Vue.prototype.$root：根组件的实例。
- Vue.prototype.$route：当前路由对象，如果使用了Vue Router。
- Vue.prototype.$router：Vue Router 实例。
全局方法：
- Vue.use(plugin)：使用Vue插件。
- Vue.mixin(mixin)：全局混入，将一个mixin混入所有的Vue组件。
- Vue.component(name, definition)：注册全局组件。
- Vue.directive(name, definition)：注册全局指令。
- Vue.filter(name, definition)：注册全局过滤器。
- Vue.extend(options)：基于传入的选项创建一个构造函数，用于构建可复用的组件。
- Vue.nextTick(callback)：在下次DOM更新循环结束之后执行回调函数。
- Vue.set(target, key, value)：通过响应式地方式设置对象属性，确保其在响应系统中被追踪。
- Vue.delete(target, key)：通过响应式地方式删除对象的属性，确保其在响应系统中被追踪。

15.computed和watch的区别

computed适用于基于依赖数据动态计算值的场景，而watch适用于需要在数据变化时执行特定操作的场景。在实际使用中，根据具体需求选择合适的方式来监听数据变化。

computed属性可以返回一个新的值，而watch属性可以执行回调函数。

watch支持异步请求，computed支持缓存

16.18. v-if 和 v-for 哪个优先级更高？如果同时出现，应如何优化？

v-for 优先于 v-if 被解析，如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能。要避免出现这种情况，则在外层嵌套 template，在这一层进行v-if判断，然后在内部进行 v-for 循环。如果条件出现在循环内部，可通过计算属性提前过滤掉那些不需要显示的项。

17.Vue 子组件和父组件执行顺序加载渲染过程：

1.父组件 beforeCreate 2.父组件 created 3.父组件 beforeMount 4.子组件 beforeCreate 5.子组件 created 6.子组件 beforeMount 7.子组件 mounted 8.父组件

mounted 更新过程： 1. 父组件 beforeUpdate 2.子组件 beforeUpdate 3.子组件 updated 4.父组件 updated 销毁过程： 1. 父组件 beforeDestroy 2.子组件 beforeDestroy 3.子组件 destroyed 4.父组件 destoryed

18. created 和 mounted 的区别

created:在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

19.vue中$route和$router的区别
$route 主要用于获取当前路由信息，$router 则是用于进行路由操作，例如跳转到指定的路由、前进、后退等。通常来说，$route 和 $router 是紧密关联的，并且常常一起使用。

20.v-show与v-if的使用场景

v-if 与 v-show 都能控制dom元素在页面的显示

v-if 相比 v-show 开销更大的（直接操作dom节点增加与删除）

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

21.单页面如何提高加载速度

使用代码分割：将代码拆分成小块并按需加载（懒加载），以避免不必要的网络请求和减少加载时间。
缓存资源：利用浏览器缓存来存储重复使用的文件，例如 CSS 和 JS 文件、图片等。
预加载关键资源：在首次渲染之前，先提前加载关键资源，例如首页所需的 JS、CSS 或数据，以保证关键内容的快速呈现。
使用合适的图片格式：选择合适的图片格式（例如 JPEG、PNG、WebP 等），并根据需要进行压缩以减少文件大小。对于一些小图标，可以使用 iconfont 等字体文件来代替。
启用 Gzip 压缩：使用服务器端的 Gzip 压缩算法对文件进行压缩，以减少传输时间和带宽消耗。
使用 CDN：使用内容分发网络（CDN）来缓存和传递文件，以提高文件的下载速度和可靠性。
优化 API 请求：尽可能地减少 API 调用的数量，并使用缓存和延迟加载等技术来优化 API 请求的效率。
使用服务器端渲染：使用服务器端渲染（SSR）来生成 HTML，以减少客户端渲染所需的时间和资源。但需要注意，SSR 也可能增加了服务器的负担并使网站更复杂。

22. vue3和vue2的区别

以下是一些主要区别的总结：

响应式系统（Reactivity System）：Vue 3 引入了 Composition API，这是一种新的响应式系统。Composition API 提供了更灵活和强大的组件状态和逻辑管理方式，使代码组织和重用更加方便。Composition API 使用函数而不是对象，可以提高摇树优化（Tree Shaking）并减小打包体积。
更小的包体积：Vue 3 通过更好的 Tree Shaking 和更高效的运行时代码生成，相较于 Vue 2，打包体积更小。Vue 3 的响应式系统也经过优化，性能更好。
性能改进：Vue 3 采用了更快、更高效的渲染机制，得益于新的编译器。虚拟 DOM 的差异化算法经过优化，减少不必要的更新，提升渲染性能。
**作用域插槽替代为 <slot>**：在 Vue 3 中，作用域插槽的概念被更直观、更简化的 <slot> 语法所取代，使得在组件组合中定义和使用插槽更加容易。
引入 Teleport 组件：Vue 3 引入了 Teleport 组件，可以在 DOM 树中的不同位置渲染内容，用于创建模态框、工具提示和其他覆盖层效果。
片段（Fragments）：Vue 3 引入了一个名为片段（Fragment）的内置组件，允许将多个元素进行分组，而无需添加额外的包装元素。
更好的 TypeScript 支持：Vue 3 默认提供了更好的 TypeScript 支持，具有增强的类型推断和与 TypeScript 工具更好的集成。
简化的 API：Vue 3 对许多 API 进行了简化和优化，使得学习和使用框架更加容易。新的 API 提供了更好的一致性，并与 JavaScript 标准更加对齐。

23. SPA首页加载时间慢怎么办

加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了
解决方案

常见的几种SPA首屏优化方式

减小入口文件积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR
减小入口文件体积

常用的手段是路由懒加载，把不同路由对应的组件分割成不同的代码块，待路由被请求的时候会单独打包路由，使得入口文件变小，加载速度大大增加

24.ES6数组多了哪些扩展

以下是一些 ES6 中数组新增的扩展：

扩展运算符（Spread operator）：使用 ... 语法可以将一个数组展开成多个独立的元素，或者将多个元素合并为一个数组。

Array.from()：通过类似数组的对象或可迭代对象创建一个新的数组。

Array.of()：创建一个由传入参数组成的新数组。

find() 和 findIndex()：用于在数组中查找满足指定条件的第一个元素及其索引。

includes()：检查数组是否包含指定的元素，并返回布尔值。

fill()：使用指定的值填充数组的所有元素。

flat() 和 flatMap()：用于将嵌套的数组展平，减少维度。

map()、filter()、reduce()、forEach() 等方法的回调函数支持箭头函数语法。

entries()、keys() 和 values()：用于遍历数组的键值对、键和值。

数组解构赋值：可以通过解构赋值从数组中提取值并赋给变量。

数组的扩展属性：Array.prototype.length 可以被修改，Array.prototype[@@toStringTag] 返回 "Array"。

25.JavaScript 中的简单数据类型

字符串（String）：用于表示文本数据，用引号（单引号或双引号）包裹起来，例如："Hello, World!"。
数字（Number）：用于表示数值数据，包括整数和浮点数（带小数点的数），例如：42、3.14。
布尔值（Boolean）：用于表示逻辑值，只有两个可能的取值：true（真）和false（假）。
undefined：表示未定义的值，通常表示未声明的变量或缺少返回值的函数。
null：表示空值，用于显式地表示变量或对象没有值。
Symbol（符号）：表示唯一的标识符，用于对象属性的键。
BigInt：用于表示任意精度的整数。BigInt 是一种简单数据类型，在 ECMAScript 2020 中引入。

26.var let cost 的区别

var、let、const三者区别可以围绕下面五点展开：

变量提升

// var
console.log(a)  // undefined
var a = 10

// let 
console.log(b)  // Cannot access 'b' before initialization
let b = 10

// const
console.log(c)  // Cannot access 'c' before initialization
const c = 10

暂时性死区
var不存在暂时性死区

let和const存在暂时性死区，只有等到声明变量的那一行代码出现，才可以获取和使用该变量
块级作用域

var不存在块级作用域

let和const存在块级作用域
// var
{
    var a = 20
}
console.log(a)  // 20

// let
{
    let b = 20
}
console.log(b)  // Uncaught ReferenceError: b is not defined

// const
{
    const c = 20
}
console.log(c)  // Uncaught ReferenceError: c is not defined
重复声明

重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

// var
var a = 10
var a = 20 // 20

// let
let b = 10
let b = 20 // Identifier 'b' has already been declared

// const
const c = 10
const c = 20 // Identifier 'c' has already been declared

修改声明的变量

var和let可以

const声明一个只读的常量。一旦声明，常量的值就不能改变

// var
var a = 10
a = 20
console.log(a)  // 20

//let
let b = 10
b = 20
console.log(b)  // 20

// const
const c = 10
c = 20
console.log(c) // Uncaught TypeError: Assignment to constant variable

使用：能用const的情况尽量使用const，其他情况下大多数使用let，避免使用var

27.es6有哪些新特征

1）.解构-快速提取数组/对象中的元素

数组解构

单独解构-根据数组索引，将数组解构成单独的元素

const arr = [1, 2, 3]

const [a, b, c] = arr
console.log(a, b, c) //1,2,3
const [, , d] = arr
console.log(d) //3
默认值，解构时可以给变量设置默认值，数组没有这个元素的话
const arr = [1, 2, 3]

const [, , , defaultVal = '4'] = arr
console.log('设置默认值', defaultVal)
剩余解构-用 "...+变量名" 解构剩余参数到新数组，只能用一次
const arr = [1, 2, 3]

const [e, ...rest] = arr
console.log(rest) //[2, 3]
实例应用
// 拆分字符串
const str = 'xiaobai/18/200'
const strArr = str.split('/')
const [, age] = strArr
console.log(age) //18
对象解构

单个/多个解构-跟数组解构差不多

const obj = { name: 'xiaohui', age: 18, height: undefined }
const { name, age } = obj
console.log(name, age) // 'xiaohui', 18
解构+重命名-给解构出来的变量重命名
const obj = { name: 'xiaohui', age: 18, height: undefined }
const { name: objName } = obj
console.log(objName)
默认值-给解构变量设置默认值
const obj = { name: 'xiaohui', age: 18, height: undefined }
const { next = 'default' } = obj
console.log(next)

2）模板字符串

用法：使用``将字符串包裹起来

功能：可以换行、插值、使用标签函数进行字符串操作

示例：

换行/插值
//换行
const str = `fdsjak
    fdsa`
console.log(str)

// 插值
const strs = `random: ${Math.random()}`
console.log(strs)
标签函数-可以对模板字符串的字符串和插值进行处理和过滤等操作
/**
 * 字符串模板函数
 * @param {array} strs 以插值为分隔符组成的字符串数组
 * @param {string} name 插值的value，有多少个就会传入多少个
 */
const tagFunc = (strs, name, gender) => {
  const [str1, str2, str3] = strs
  const genderParsed = gender == '1' ? '男' : '女'
  // 可以在此做过滤，字符串处理，多语言等操作
  return str1 + name + str2 + str3 + genderParsed
}

// 带标签的模板字符串,
const person = {
  name: 'xiaohui',
  gender: 1,
}
// 返回值为标签函数的返回值
const result = tagFunc`my name is ${person.name}.gender is ${person.gender}`
console.log(result) //my name is xiaohui.gender is 男

3）字符串扩展方法

includes-是否包含
startsWith-是否以什么开始
endsWith-是否以什么结束

const str = 'abcd' console.log(str.includes('e')) //false console.log(str.startsWith('a')) //true

console.log(str.endsWith('a')) //false

4）参数默认值&剩余参数

给函数形参设置默认值
// 带默认参数的形参一般放在后面，减少传参导致的错误几率
const defaultParams = function (name, age = 0) {
  return [age, name]
}
console.log(defaultParams(1))
使用...rest 形式设置剩余形参，支持无限参数
// 剩余参数，转化成数组
const restParams = function (...args) {
  console.log(args.toString()) //1, 2, 3, 4, 5
}

restParams(1, 2, 3, 4, 5)

5）展开数组

使用...将数组展开

const arr = [1, 2, 3]

console.log(...arr)
// 等价于es5中以下写法
console.log.apply(console, arr)

6）箭头函数

特性&优势：

1、简化了函数的写法
2、没有 this 机制，this 继承自上一个函数的上下文，如果上一层没有函数，则指向 window
3、作为异步回调函数时，可解决 this 指向问题

const inc = (n) => n + 1
console.log(inc(100))

const obj = {
  name: 'aa',
  func() {
    setTimeout(() => {
      console.log(this.name) //aa
    }, 0)
    setTimeout(function () {
      console.log(this.name) //undefined
    }, 0)
  },
}
obj.func()

7）对象字面量增强

同名属性可以省略 key:value 形式，直接 key，
函数可以省略 key：value 形式
可以直接 func(),
可以使用计算属性，比如：{[Math.random()]: value}

/**
 * 1、增强了对象字面量：
 * 1，同名属性可以省略key:value形式，直接key，
 * 2，函数可以省略key：value形式
 * 3，可以直接func(),
 * 4，可以使用计算属性，比如：{[Math.random()]: value}
 */
const arr = [1, 2, 3]
const obj = {
  arr,
  func() {
    console.log(this.arr)
  },
  [Math.random()]: arr,
}

console.log(obj)

8）Object.assign(target1, target2, targetN)-复制/合并对象

/**
 * Object.assign(target1, target2, ...targetn)
 * 后面的属性向前面的属性合并
 * 如果target1是空对象，可以创建一个全新对象，而不是对象引用
 */
const obj1 = {
  a: 1,
  b: 2,
}
const obj2 = {
  a: 1,
  b: 2,
}

const obj3 = Object.assign({}, obj1)
obj3.a = 5
console.log(obj3, obj2, obj1)

28. es6中新增的sSet和Map是ES6中新增的两种数据结构。

Set是一组唯一值的集合，类似于数组但没有重复值。它是用于生成Set数据结构的构造函数。Map是一组键值对的集合，类似于字典。它也是用于生成Map数据结构的构造函数。Set和Map之间的一些区别包括：Set没有键，只有值，而Map既有键又有值；Set没有重复值，而Map可以有重复值但不能有重复键；Set没有访问特定元素的方法，而Map有一种通过其键访问特定值的方法。Set和Map可以转换为其他数据结构，例如数组，使用展开运算符或其他方法。

29.如何把一个对象变为可迭代对象

可迭代对象（Iterable object）是数组的泛化，这个概念是在说任何对象都可以被定制为可在 for..of 循环中使用的对象。

也就是说，可以应用 for..of 的对象被称为 可迭代对象。

在ES6中，可以使用Generator函数来实现迭代器对象，也可以手动实现迭代器对象。以下是手动实现迭代器对象的示例代码：

let myIterable = {
  [Symbol.iterator]: function* () {
    yield 1;
    yield 2;
    yield 3;
  }
}

for (let value of myIterable) {
  console.log(value);
}
// Output:
// 1
// 2
// 3

30.说说你对iterator，generator，async、await的理解

Iterator

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。
Iterator接口主要由next()方法组成，该方法返回一个包含value和done属性的对象，value属性表示当前迭代到的值，done属性表示迭代是否结束。
ES6中的许多数据结构都实现了Iterator接口，例如Array、Map、Set等。
可以使用for...of循环遍历实现了Iterator接口的数据结构。

Generator

Generator是一种函数，可以用来生成迭代器对象。
Generator函数的执行过程是分段执行的，可以暂停和恢复执行。
Generator函数使用yield语句控制执行流程，每次执行到yield语句时会暂停执行并返回一个包含value和done属性的对象，value属性表示当前迭代到的值，done属性表示迭代是否结束。
Generator函数可以通过next()方法控制执行流程，每次调用next()方法时会从上一次暂停的地方继续执行。
Generator函数可以用来实现异步编程，例如使用co库或async/await语法糖。

Async/Await

Async/Await是ES7中新增的语法糖，用于简化异步编程。
Async函数是Generator函数的语法糖，可以用来定义异步函数。
Async函数返回一个Promise对象，可以使用await关键字等待Promise对象的结果。
Await关键字只能在Async函数内部使用，用于等待Promise对象的结果。
Async/Await语法糖可以使异步代码看起来更像同步代码，更易于理解和维护。

31.ES5中的类和ES6中的class有以下区别：

ES5中的类

ES5中没有class关键字，使用函数构造器来创建类。
使用函数构造器创建的类可以通过原型链实现继承。
ES5中的类没有内置的继承机制，需要手动实现继承。

ES6中的class

ES6中引入了class关键字，使用class关键字来创建类。
使用class关键字创建的类可以通过extends关键字实现继承。
ES6中的类有内置的继承机制，可以使用super关键字调用父类的构造函数和方法。
ES6中的类可以使用constructor方法来定义构造函数，使用static关键字来定义静态方法。

32.async、await有几种工作状态

Async/await有两种状态：resolved（异步操作成功）和rejected（异步操作失败）。在使用async/await时，可以使用try...catch语句来捕获异步操作的错误。当异步操作成功时，await关键字会返回异步操作的结果；当异步操作失败时，await关键字会抛出一个错误，可以使用try...catch语句来捕获这个错误。在async函数中，可以使用return语句返回异步操作的结果，返回的结果会被包装成一个Promise对象。如果async函数中没有return语句，那么返回的结果是一个Promise对象，该对象的状态为resolved，值为undefined。在使用async/await时，需要注意以下几点：

async函数返回的是一个Promise对象，可以使用then()方法或await关键字来获取异步操作的结果。
await关键字只能在async函数内部使用，用于等待Promise对象的结果。
await关键字后面跟Promise对象，async函数必须等到内部的所有await命令的Promise对象执行完，才会发生状态改变。
async函数内部可以使用try...catch语句来捕获异步操作的错误。

33. 说说对es6中rest参数的理解

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {
  let sum = 0;

  for (var val of values) {
    sum += val;
  }

  return sum;
}

add(2, 5, 3) // 10
上面代码的add函数是一个求和函数，利用 rest 参数，可以向该函数传入任意数目的参数。

34.this的指向

// 在全局作用域中定义箭头函数
const myArrowFunction = () => {
  console.log(this);
};
myArrowFunction(); // 输出全局对象（例如window对象或global对象）

// 在对象方法中定义箭头函数
const myObject = {
  myMethod: function() {
    const myArrowFunction = () => {
      console.log(this);
    };
    myArrowFunction();
  }
};
myObject.myMethod(); // 输出myObject对象

// 在对象方法中定义普通函数
const myObject = {
  myMethod: function() {
    const myFunction = function() {
      console.log(this);
    };
    myFunction();
  }
};
myObject.myMethod(); // 输出全局对象（例如window对象或global对象）

35.object.assign和扩展运算符的区别？

Object.assign()方法接收的第一个参数作为目标对象，后面的所有参数作为源对象。然后把所有的源对象合并到目标对象中。它会修改了一个对象，因此会触发 ES6 setter。

扩展操作符（…）使用它时，数组或对象中的每一个值都会被拷贝到一个新的数组或对象中。它不复制继承的属性或类的属性，但是它会复制ES6的 symbols 属性。

扩展运算符
let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = {...outObj}
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}


Object.assign()

let outObj = {
  inObj: {a: 1, b: 2}
}
let newObj = Object.assign({}, outObj)
newObj.inObj.a = 2
console.log(outObj) // {inObj: {a: 2, b: 2}}

36.reflect对象的作用

Reflect是ES6中新增的一个内置对象，它提供了一组用于操作对象的方法，可以用来拦截和修改对象的某些操作，从而提供更加灵活和强大的对象操作能力。

37.如何中断promise

Promise 有个缺点就是一旦创建就无法取消，所以本质上 Promise 是无法被终止的。但是，我们可以通过一些技巧来实现类似中断 Promise 的效果。以下是一些中断 Promise 的方法：

在 Promise 中添加超时机制，如果超时则将 Promise 的状态设置为rejected，从而中断 Promise 的执行。
在 Promise 中添加一个标志位，当标志位为true时，中断 Promise 的执行。
在 Promise 中添加一个reject函数，当需要中断 Promise 时，调用reject函数并传入一个错误对象，从而中断 Promise 的执行。
在 Promise 中使用race方法，将 Promise 与一个空Promise进行比较，当需要中断 Promise 时，将空Promise的状态设置为rejected，从而中断 Promise 的执行。

38. css中哪些方式可以隐藏页面元素，有什么区别

39.怎么样理解回流和重绘，什么场景下会触发

回流：布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘：当计算好盒模型的位置、大小及其他属性后，浏览器根据每个盒子特性进行绘制
具体的浏览器解析渲染机制如下所示：
- 解析HTML，生成DOM树，解析CSS，生成CSSOM树
- 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
- Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
- Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
- Display:将像素发送给GPU，展示在页面上

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流，如下面情况：

添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候（这避免不了）
浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘触发时机

触发回流一定会触发重绘

可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）

除此之外还有一些其他引起重绘行为：

颜色的修改
文本方向的修改
阴影的修改

31.z-indx在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

32. css选择器的优先级

内联 > ID选择器 > 类选择器 > 标签选择器

33.怎么触发BFC，BFC有什么应用场景？

在介绍BFC之前，需要先给大家介绍一下文档流。

我们常说的文档流其实分为定位流、浮动流、普通流三种。

如果元素的属性 position 为 absolute 或 fixed，它就是一个绝对定位元素。

1）在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

它的定位相对于它的包含块，相关CSS属性：top、bottom、left、right；

对于 position: absolute，元素定位将相对于上级元素中最近的一个relative、fixed、absolute，如果没有则相对于body；

对于 position:fixed，正常来说是相对于浏览器窗口定位的，但是当元素祖先的 transform 属性非 none 时，会相对于该祖先进行定位。

2）在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

3）普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。

除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

4）先看下MDN上关于BFC的定义：

块格式化上下文（Block Formatting Context，BFC）是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

除了 BFC，还有：

IFC（行级格式化上下文）- inline 内联
GFC（网格布局格式化上下文）- display: grid
FFC（自适应格式化上下文）- display: flex或display: inline-flex

注意：同一个元素不能同时存在于两个 BFC 中。

块级元素的上外边距和下外边距有时会合并（或折叠）为一个外边距，其大小取其中的较大者，这种行为称为外边距折叠（重叠），注意这个是发生在属于同一 BFC 下的块级元素之间

解决办法：根据 BFC 特性，创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器，加属性 overflow: hidden，触发 BFC，那么两个 div 就不属于同个 BFC 了。

34.CSS预处理器和后处理器是什么？为什么要使用他们

预处理器， 如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin，变量，循环，函数等对编写以及开发UI组件都极为方便。

后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

其它css预处理器语言：Sass（Scss）, Less, Stylus, Turbine, Swithch css, CSS Cacheer, DT Css。

使用原因：

结构清晰，便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承
完美的兼容了CSS代码，可以应用到老项目中

35. 为什么有时候用translate，而不是用position进行定位

translate 是 transform 属性的⼀个值。

改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。

transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。

因此translate()更⾼效，可以缩短平滑动画的绘制时间。

⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

36.如何从html元素集成box-sizing？

在大多数情况下我们在设置元素的 border 和 padding 并不希望改变元素的 width,height值，这个时候我们就可以为该元素设置 box-sizing:border-box;。

如果不希望每次都重写一遍，而是希望他是继承而来的，那么我们可以使用如下代码：

html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

这样的好处在于他不会覆盖其他组件的 box-sizing 值，又无需为每一个元素重复设置 box-sizing:border-box;

37.css sprites是什么，怎么使用

CSS Sprites是一种网页图片应用处理方式，就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位。

38.箭头函数和普通函数的区别？
它们之间的区别如下：

语法：箭头函数使用箭头符号（=>）来定义函数，而普通函数使用关键字function来定义函数。
this关键字：箭头函数没有自己的this关键字，它会继承外部作用域的this关键字。而普通函数的this关键字则是在函数被调用时动态绑定的。
arguments对象：箭头函数没有自己的arguments对象，它会继承外部作用域的arguments对象。而普通函数有自己的arguments对象。
构造函数：箭头函数不能用作构造函数，不能使用new关键字来实例化一个对象。而普通函数可以用作构造函数。
函数声明提升：普通函数可以在声明之前调用，因为它们会被函数声明提升。而箭头函数不会被函数声明提升，因此必须在声明之后才能调用。
简洁性：箭头函数通常比普通函数更简洁，因为它们可以省略大括号、return关键字和参数括号（如果只有一个参数）。

39Symbol 基本使用

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。 Symbol 特点 1) Symbol 的值是唯一的，用来解决命名冲突的问题 2) Symbol 值不能与其他数据进行运算 3) Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

11个内置的symbol值

40.promise的三种状态

Promise是JavaScript中的一个对象，用于处理异步操作。Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。这三种状态之间的转换只有两种途径：异步操作从未完成pending => 已完成fulfilled，或者异步操作从未完成pending => 失败rejected。状态一旦改变，就无法再次改变状态。Promise对象可能会变为fulfilled状态并传递一个值给相应的状态处理方法，也可能变为失败状态（rejected）并传递失败信息。当其中任一种情况出现时，Promise对象的then方法绑定的处理方法就会被调用。因为Promise.prototype.then和Promise.prototype.catch方法返回promise对象，所以它们可以被链式调用。

41.有关set

Set ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

1) size 返回集合的元素个数

2) add 增加一个新元素，返回当前集合

3) delete 删除元素，返回 boolean 值

4) has 检测集合中是否包含某个元素，返回 boolean 值

5) clear 清空集合，返回 undefined

42.有关map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。

Map 的属性和方法：

1) size 返回 Map 的元素个数

2) set 增加一个新元素，返回当前 Map

3) get 返回键名对象的键值

4) has 检测 Map 中是否包含某个元素，返回 boolean 值

5) clear 清空集合，返回 undefined

43.一些es6的方法

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为 NaN

parseInt()方法将字符串转换为整数

parseFloat()方法将字符串转换为浮点数。

Math.trunc 用于去除一个数的小数部分，返回整数部分

Number.isInteger() 用来判断一个数值是否为整数

math.sign（）判断一个数到底是正数，负数还是0

Object.is 判断两个值是否相等

Object.assign 对象的合并

Object.setPrototypeOf() JavaScript中用于设置对象原型的两个方法

Object.getPrototypeOf() JavaScript中用于获取对象原型的两个方法

44.+0/-0

+0是JavaScript中的正零，表示一个正数的零值。在JavaScript中，正零和负零是不同的，它们在比较时是相等的，但在某些计算中可能会产生不同的结果。例如，1/+0的结果是正无穷大，而1/-0的结果是负无穷大

45.模块化

ES6 之前的模块化规范有：

1) CommonJS => NodeJS、Browserify

2) AMD => requireJS

3) CMD => seaJS

模块功能主要由两个命令构成：export 和 import。

⚫ export 命令用于规定模块的对外接口

⚫ import 命令用于输入其他模块提供的功能

46.ES7新特性

.Array.prototype.includes Includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

指数操作符在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同

48 章 ECMASript 8 新特性

.async 函数

1. async 函数的返回值为 promise 对象，

2. promise 对象的结果由 async 函数执行的返回值决定

await 表达式

1. await 必须写在 async 函数中

2. await 右侧的表达式一般为 promise 对象

3. await 返回的是 promise 成功的值

4. await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理

Object.values()方法返回一个给定对象的所有可枚举属性值的数组

Object.entries()方法返回一个给定对象自身可遍历属性 [key,value] 的数组

Object.getOwnPropertyDescriptors 该方法返回指定对象所有自身属性的描述对象

47.ECMASript 9 新特性

.Rest/Spread 属性 Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符

ES9 允许命名捕获组使用符号『?』,这样获取捕获结果可读性更强

let str = '<a href="http://www.atguigu.com">尚硅谷</a>';
const reg = /<a href="(?<url>.*)">(?<text>.*)<\/a>/;
const result = reg.exec(str);
console.log(result.groups.url);
console.log(result.groups.text);

ES9 支持反向断言，通过对匹配结果前面的内容进行判断，对匹配进行筛选。

//声明字符串
let str = 'JS5211314 你知道么 555 啦啦啦';
//正向断言
const reg = /\d+(?=啦)/;
const result = reg.exec(str);
//反向断言
const reg = /(?<=么)\d+/;
const result = reg.exec(str);
console.log(result)

.正则表达式 dotAll 模式正则表达式中点.匹配除回车外的任何单字符，标记『s』改变这种行为，允许行终止符出现

let str = `
<ul>
 <li>
 <a>肖生克的救赎</a>
 <p>上映日期: 1994-09-10</p>
 </li>
 <li>
 <a>阿甘正传</a>
 <p>上映日期: 1994-07-06</p>
 </li>
</ul>`;
//声明正则
const reg = /<li>.*?<a>(.*?)<\/a>.*?<p>(.*?)<\/p>/gs;
//执行匹配
const result = reg.exec(str);
let result;
let data = [];
while(result = reg.exec(str)){
 data.push({title: result[1], time: result[2]});
}
//输出结果
console.log(data);

48.ECMASript 10 新特性

Object.fromEntries

trimStart 和 trimEnd

.Array.prototype.flat 与 flatMap

.Symbol.prototype.description

49. ECMASript 11 新特性

String.prototype.matchAll

类的私有属性

Promise.allSettled

可选链操作符

动态 import 导入

globalThis 对象

50.属性box-sizing

box-sizing: border-box;元素设置宽度按 border-box 宽度（内容＋内边距+边框）计算（怪异盒模型）

box-sizing: content-box; （默认值），元素设置宽度按 content-box宽度（内容）计算（标准盒模型）

51。父元素空间不足会导致子元素有外边距失效

这是因为在CSS中，相邻的两个元素的外边距会发生折叠，即两个元素之间的外边距取最大值，而不是相加。如果父元素的空间不足，子元素的外边距可能会与父元素的外边距发生折叠，导致子元素的外边距失效。

52.• 使用负外边会产生一个元素“悬浮”在另一个元素上面的效果。

• 注意：被覆盖的元素文本内容不会被覆盖！

53.• 使用场景：左侧自适应，右侧固定宽度布局效果

1. 为浮动元素（.box）设置右侧外边距为负

2. 右侧外边距绝对值等于紧邻兄弟元素的宽度

3. 为紧邻兄弟元素设置左浮动

4. 注意事项： .box需要添加一个子元素，子元素外边距为正值，该值等于父元素的负边距的绝对值。同时不要给子元素指定宽度！！！，通过上述处理，就不会出现覆盖内容的问题！

54.css基础知识

• 一个元素的的位置和大小有时是通过相对于一个特定矩形盒子（containing block）计算。

• 一个元素的包含块定义如下，

– 浏览器（user agent – 用户代理）选择根元素(html)作为包含块，也称之为初始包含块。

– 正常文档流以及浮动的元素，包含块由最近的块级祖先元素（父元素）盒子的内容边界 ( content-box ) 组成。

– position: absolute，包含块由最近的 position 不是 static（ absolute / relative）的祖先建立，默认是基于初始包含块。

– position: fixed，包含块由视口建立

55.如何让一个div块垂直居中

1）.container { display: flex; justify-content: center; align-items: center; }

这个CSS样式将会使容器内的元素在垂直方向上居中。display: flex将容器设置为flex布局，justify-content: center将元素在水平方向上居中，align-items: center将元素在垂直方向上居中。

2).container { position: relative; } .

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

这个CSS样式将会使.center元素在垂直方向上居中。position: relative将容器设置为相对定位，position: absolute将元素设置为绝对定位，top: 50%将元素向下移动50%，left: 50%将元素向右移动50%，transform: translate(-50%, -50%)将元素向左上方移动50%的宽度和高度，从而实现垂直方向上居中的效果。

3).container { display: table; }

.center { display: table-cell; vertical-align: middle; }

这个CSS样式将会使.center元素在垂直方向上居中。display: table将容器设置为table布局，display: table-cell将元素设置为table单元格，vertical-align: middle将元素在垂直方向上居中。总的来说，要让一个div块垂直居中，可以使用CSS样式来设置。常用的方法包括使用flex布局、position和transform属性以及table布局。

4)使用内边距法实现div垂直居中的方法如下：

设置父元素的高度和宽度。

css

.parent { height: 300px; width: 300px; }

设置子元素的内边距。

css

.child { padding-top: calc((300px - 100px) / 2); }

这个CSS样式将会使子元素的上内边距为父元素高度减去子元素高度再除以2，从而实现垂直居中的效果。

设置子元素的高度和宽度。

css

.child { height: 100px; width: 100px; }

这个CSS样式将会使子元素的高度和宽度都为100px，从而实现垂直居中的效果。总的来说，使用内边距法实现div垂直居中的方法是将父元素的高度和宽度设置好，然后通过设置子元素的内边距和高度和宽度来实现垂直居中的效果。

56.层叠

• 浮动造成的层叠 – 只能浮动在其兄弟元素上 – 兄弟元素有文本会环绕浮动元素

• 定位（绝对定位，固定定位）的层叠 – 彻底脱离文档，会对其层级下的元素全覆盖，包裹文本

• 负外边距造成的层叠 – 本质边界在改变了，效果类似定位造成的层叠。 – 文本无法被覆盖。

57.

行盒（line-box）元素的每一行称为一条line box，它又是由这一行的许多inline-box组成。

替换元素替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。比如： type=“text” 的是，这是一个文本输入框，输入新值时，浏览器显示就不一样 (X)HTML中的、、、、都是替换元素，这些元素都没有实际的内容。

非替换元素 (X)HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。

58.

在HTML5 API里，页面DOM里的每个节点上都有一个 classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类（即class属性值）。 • 使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类

59.响应式布局简介

• 1、流体网格：网格大小可以随着屏幕尺寸大小做出相对应的比例缩放。

• 2、弹性图片：不给图片设定固定尺寸，根据流体网格自动缩放。一条代码即可搞定：img{max-width: 100%}

• 3、媒体查询（Media Query）：响应式设计的灵魂，可以根据设备尺寸，匹配不同的样式。

• 4、屏幕分辨率：利用媒体查询对不同分辨率手机设置不同的样式。

• 5、主要断点：WEB开发中的新名词，在响应式设计中尤为重要。简单说就是设备的临界点。利用媒体查询针对不同尺寸终端设备设置不同样式

6.CSS3的flexbox布局：可以通过flexbox布局来实现弹性和自适应的网页布局，可以轻松地控制元素的排列和对齐方式。

7.CSS3的grid布局：可以通过grid布局来实现网格化的布局，可以将网页分成多个区域，并控制它们的大小和位置。

8.REM和VW/VH单位：可以使用REM和VW/VH单位来实现相对布局，可以根据屏幕尺寸和分辨率来自动调整元素的大小和位置。

9.JavaScript框架：一些JavaScript框架，例如Bootstrap和Foundation，提供了响应式布局的组件和工具，可以帮助开发者快速构建响应式网页。

60.<meta name=”viewport” content=””

– width ：可视区域宽度，可以是一个具体的数字也可以是device-width。可以让网页的宽度自动适应手机屏幕的宽度

– height ：可视区域高度，可以是一个具体的数字也可以是device-height。

– inital-scale：页面首次显示时，可是区域的缩放比例，取值1.0页面按实际比列显示，无任何缩放。

– minimun-scale：可视区域最小缩放级别，取值1.0禁止用户缩放至实际尺寸以下。

– maximun-sacle：可视区域最大缩放级别，取值1.0禁止用户放大至实际尺寸以上。

– user-scalable：用户是否可以对页面进行缩放。yes可以缩放，no禁止缩放。

移动端的网页需要设置如下meta

61.px：在PC端使用，移动端谨慎使用。 • em：避免嵌套使用，基于自身字体的大小。 • %：避免嵌套使用, 基于父元素。 • rem：基于html元素字体大小、

62.CSS3 文本 - 英文单词截断与不截断

  .box1  {
            overflow-wrap: break-word;
        }
        .box2{
            word-break: break-all;
        }
        .box3{
            word-break: keep-all;
        }
        .box4{
            white-space: nowrap;
        }


  <p> word-break: break-all; 强行截断单词！<br></p>
        <div class="box box2"> Hello World Hello,World Hooooooooooole</div>
        <p> word-break: keep-all; 不准许“截断” 单词！！<br></p>
        <div class="box box3"> Hello World Hello,World Hooooooooooole</div>
        <p> white-space: nowrap; 永不换行，直到遇到<br></p>
        <div class="box box4"> Hello World Hello,World Hooooooooooole</div>

63.HTML5的基本结构

<!-- 文档声明，声明当前网页的版本 -->
<!doctype html>
<!-- html的根标签（元素），网页中的所有内容都要写根元素的里边 -->
<html>
    <!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
    <head>
        <!-- meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题 -->
        <meta charset="utf-8">
        <!-- title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容 -->
        <title>网页的标题</title>
    </head>
    <!-- body是htm1的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里 -->
    <body>
        <!-- h1网页的一级标题 -->
        <h1>网页的大标题</h1>
    </body>
</html>

64.

65.meta属性

66.锚点跳转

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生

可以将#作为超链接的路径的占位符使用。

可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一不重复）

67.选择器权重

68文档流

网页是一个多层的结构，一层摁着一层

通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层

这些层中，最底下的一层称为文档流

文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列

对于我们来元素主要有两个状态：在文档流中，不在文档流中（脱离文档流）

块元素

块元素会在页面中独占一行

默认宽度是父元素的全部（会把父元素撑满）

默认高度是被内容撑开（子元素）

行内元素

行内元素不会独占页面的一行，只占自身的大小
行内元素在页面中左向右水平排列（书写习惯一致）

如果一行之中不能容纳下所有的行内元素，则元素会换到第二行继续自左向右排列

行内元素的默认宽度和高度都是被内容撑开

69.

margin (子元素远离父元素边框)

如果父盒子没有设置border框着，那么他的子元素无法利用margin-top 来远离父元素的上边框

如果使用了margin-top会使子元素和父元素一起往下移

（子想离，父不设置border边框则离得是流不是父盒子）

应该是border让元素脱离了文档流（margin塌陷）

70.

什么是CSS Reset？

我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。

CSS重设就是先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题

71.高度塌陷

在浮动布局中，父元素的高度默认是被子元素撑开的

当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失

父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱

72.BFC（Block Formatting Context）块级格式化环境

BFC是一个CSS中的一个隐含的属性，可以为一个元素开启BFC

开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点：

不会被浮动元素覆盖

父子元素外边距不会重叠

可以包含浮动的元素

设置overflow为非visible值：既没有覆盖元素，也保持了独占一方的特性（保持了宽度），与下方元素也保持了最初的间隙
常用的方式为元素设置overflow:hidden（overflow:auto也是ok的）开启其BFC，以使其可以包含浮动元素
overflow:scroll 会有滚动条，可能并不需要的，所以不太推荐

74.清楚浮动的影响

clear作用：清除浮动元素对当前元素所产生的影响（本质是为元素添加一个margin-top属性，值由浏览器自动计算）

可选值：

left 清除左侧浮动元素对当前元素的影响

right 清除右侧浮动元素对当前元素的影响

both 清除两侧中影响较大一侧元素的影响（注意，这里不是同时清除两侧的影响）

75.

高度塌陷问题，一般用::after

外边距重叠问题，一般用::before
clearfix 这个样式就可以同时解决高度塌陷和外边距重叠的问题

其中.clearfix::before是为了解决外边距重叠问题
```
.clearfix::before{

content: '';

display: table;

}
```
.clearfix::after是为了解决高度塌陷问题
```
.clearfix::after{

content: '';

display: table;

clear: both;

}
```

两者合在一起，就可以完美地解决高度塌陷和外边距重叠这两大“世纪难题”了

76.继承性
概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
规则：优先继承离得近的。
常见的可继承属性：
text-?? ， font-?? ， line-?? 、 color ......（备注：参照MDN网站，可查询属性是否可被继承。）

77.

块元素（block）
1. 主体结构标签： <html> 、 <body>
2. 排版标签： <h1> ~ <h6> 、 <hr> 、 <p> 、 <pre> 、 <div>
3. 列表标签： <ul> 、 <ol> 、 <li> 、 <dl> 、 <dt> 、 <dd>
4. 表格相关标签： <table> 、 <tbody> 、 <thead> 、 <tfoot> 、 <tr> 、
<caption>
5. <form> 与 <option>
行内元素（inline）
1. 文本标签： <br> 、 <em> 、 <strong> 、 <sup> 、 <sub> 、 <del> 、 <ins>
2. <a> 与 <label>
行内块元素（inline-block）
1. 图片： <img>
2. 单元格： <td> 、 <th>
3. 表单控件： <input> 、 <textarea> 、 <select> 、 <button>
4. 框架标签： <iframe>

78.margin 塌陷问题
什么是 margin 塌陷？
第一个子元素的上 margin 会作用在父元素上，最后一个子元素的下 margin 会作用在父元素上。
如何解决 margin 塌陷？
方案一：给父元素设置不为 0 的 padding 。
方案二：给父元素设置宽度不为 0 的 border 。
方案三：给父元素设置 css 样式 overflow:hidden
margin 合并问题
什么是 margin 合并？
上面兄弟元素的下外边距和下面兄弟元素的上外边距会合并，取一个最大的值，而不是相加。
如何解决 margin 塌陷？
无需解决，布局的时候上下的兄弟元素，只给一个设置上下外边距就可以了。

79. visibility和display的区别

方式一：visibility 属性
visibility 属性默认值是 show ，如果设置为 hidden ，元素会隐藏。
元素看不见了，还占有原来的位置（元素的大小依然保持）。
方式二： display 属性
设置 display:none ，就可以让元素隐藏。
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽高。

80.padding 复合属性的使用规则：

1. padding: 10px; 四个方向内边距都是 10px 。

2. padding: 10px 20px; 上 10px ，左右 20px 。（上下、左右）

3. padding: 10px 20px 30px; 上 10px ，左右 20px ，下 30px 。（上、左右、下）

4. padding: 10px 20px 30px 40px; 上 10px ，右 20px ，下 30px ，左 40px 。（上、右、下、左）

注意点： 1. padding 的值不能为负数。 2. 行内元素的左右内边距是没问题的，上下内边距不能完美的设置。 3. 块级元素、行内块元素，四个方向内边距都可以完美设置

81 margin 注意事项

1. 子元素的 margin ，是参考父元素的 content 计算的。（因为是父亲的 content 中承装着子元素）

2. 上 margin 、左 margin ：影响自己的位置；下 margin 、右 margin ：影响后面兄弟元素的位置。

3. 块级元素、行内块元素，均可以完美地设置四个方向的 margin ；但行内元素，左右 margin 可以完美设置，上下 margin 设置无效。

4. margin 的值也可以是 auto ，如果给一个块级元素设置左右 margin 都为 auto ，该块级元素会在父元素中水平居中。

5. margin 的值可以是负值。

82.

1. 行内元素、行内块元素，可以被父元素当做文本处理。
即：可以像处理文本对齐一样，去处理：行内、行内块在父元素中的对齐。
例如： text-align 、 line-height 、 text-indent 等。
2. 如何让子元素，在父亲中 水平居中：
若子元素为块元素，给父元素加上： margin:0 auto; 。
若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。
3. 如何让子元素，在父亲中 垂直居中：
若子元素为块元素，给子元素加上： margin-top ，值为：(父元素 content －子元素盒子
总高) / 2。
若子元素为行内元素、行内块元素：
让父元素的 height = line-height ，每个子元素都加上： verticalalign:middle; 。
补充：若想绝对垂直居中，父元素 font-size 设置为 0 。

83.

4.1 元素浮动后会有哪些影响
对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟
无影响。
对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。
4.2 解决浮动产生的影响（清除浮动）
解决方案：
1. 方案一： 给父元素指定高度。
2. 方案二： 给父元素也设置浮动，带来其他影响。
3. 方案三： 给父元素设置 overflow:hidden 。
4. 方案四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 方案五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推
荐使用
.parent::after {
content: "";
display: block;
clear:both;
}
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

84.

1.2 相对定位的参考点在哪里？
相对自己原来的位置
1.3 相对定位的特点：
1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。

85.什么是包含块？

1. 对于没有脱离文档流的元素：包含块就是父元素；

2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

86.粘性定位的参考点在哪里？

离它最近的一个拥有“滚动机制”的祖先元素，即便这个祖先不是最近的真实可滚动祖先。

87。定位特点+浮动特点

1.3 相对定位的特点：
1. 不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
2. 定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
默认规则是：
定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
3. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
4. 相对定位的元素，也能继续浮动，但不推荐这样做。
5. 相对行为的元素，也能通过 margin 调整位置，但不推荐这样做。
注意：绝大多数情况下，相对定位，会与绝对定位配合使用。


3 绝对定位元素的特点：
1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3. 绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
4. 绝对定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。
何为定位元素？ —— 默认宽、高都被内容所撑开，且能自由设置宽高。


3 固定定位元素的特点
1. 脱离文档流，会对后面的兄弟元素、父元素有影响。
2. left 不能和 right 一起设置， top 和 bottom 不能一起设置。
3. 固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
4. 固定定位的元素，也能通过 margin 调整位置，但不推荐这样做。
5. 无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。


3 粘性定位元素的特点
不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
最常用的值是 top 值。
粘性定位和浮动可以同时设置，但不推荐这样做。
粘性定位的元素，也能通过 margin 调整位置，但不推荐这样做。
粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

88.. 重置默认样式

很多元素都有默认样式，比如： 1. p 元素有默认的上下 margin 。 2. h1~h6 标题也有上下 margin ，且字体加粗。 3. body 元素有默认的 8px 外边距。 4. 超链接有默认的文字颜色和下划线。 5. ul 元素有默认的左 pading 。

方案一：使用全局选择器
此种方法，在简单案例中可以用一下，但实际开发中不会使用，因为 * 选择的是所有元素，而并
不是所有的元素都有默认样式；而且我们重置时，有时候是需要做特定处理的，比如：想让 a 元
素的文字是灰色，其他元素文字是蓝色。


方案二：reset.css
选择到具有默认样式的元素，清空其默认的样式。
经过 reset 后的网页，好似“一张白纸”，开发人员可根据设计稿，精细的去添加具体的样式。
* {
margin: 0;
padding: 0;
......
}


方案三：Normalize.css
Normalize.css 是一种最新方案，它在清除默认样式的基础上，保留了一些有价值的默认样式。
官网地址：http://necolas.github.io/normalize.css/
相对于 reset.css ， Normalize.css 有如下优点：
1. 保护了有价值的默认样式，而不是完全去掉它们。
2. 为大部分HTML元素提供一般化的样式。
3. 新增对 HTML5 元素的设置。
4. 对并集选择器的使用比较谨慎，有效避免调试工具杂乱。
备注： Normalize.css 的重置，和 reset.css 相比，更加的温和，开发时可根据实际情况进行
选择

89.. box-shadow 盒子阴影使用 box-shadow 属性为盒子添加阴影。

/* 写两个值，含义：水平位置、垂直位置 */
box-shadow: 10px 10px;
/* 写三个值，含义：水平位置、垂直位置、颜色 */
box-shadow: 10px 10px red;
/* 写四个值，含义：水平位置、垂直位置、模糊值、颜色 */
box-shadow: 10px 10px 10px red;
/* 写五个值，含义：水平位置、垂直位置、模糊值、外延值、颜色 */
box-shadow: 10px 10px 10px 10px blue;
/* 写六个值，含义：水平位置、垂直位置、模糊值、外延值、颜色、内阴影 */
box-shadow: 10px 10px 20px 3px blue inset

90.开启了BFC能解决什么问题

1. 元素开启 BFC 后，其子元素不会再产生 margin 塌陷问题。

2. 元素开启 BFC 后，自己不会被其他浮动元素所覆盖。

3. 元素开启 BFC 后，就算其子元素浮动，元素自身高度也不会塌陷。

91. 如何开启BFC 根元素

根元素
浮动元素
绝对定位、固定定位的元素
行内块元素
表格单元格： table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
overflow 的值不为 visible 的块元素
伸缩项目
多列容器
column-span 为 all 的元素（即使该元素没有包裹在多列容器中）
display 的值，设置为 flow-root

92.C/S架构与B/S架构

1. 上面提到的应用软件，又分为两大类： C/S架构，特点：需要安装、偶尔更新、不跨平台、开发更具针对性。 B/S架构，特点：无需安装、无需更新、可跨平台、开发更具通用性。名词解释：C => client（客户端）、B => browser（浏览器）、S => server（服务器）。服务器：为软件提供数据的设备（在背后默默的付出）。

2. 前端工程师，主要负责编写 B/S架构中的网页（呈现界面、实现交互）。备注：大前端时代，我们可以用前端的技术栈，做出一个C/S架构的应用、甚至搭建一个服务器😎。

93.隐藏域

用户不可见的一个输入区域，作用是：提交表单的时候，携带一些固定的数据。 name 属性：指定数据的名称。 value 属性：指定的是真正提交的数据。

<input type="hidden" name="tag" value="100">

94.

header 整个页面，或部分区域的头部 双
footer 整个页面，或部分区域的底部 双
nav 导航 双
article 文章、帖子、杂志、新闻、博客、评论等。 双
section
页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含
标题）。 双
aside 侧边栏 双
main 文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。 双
hgroup 包裹连续的标题，如文章主标题、副标题的组合 （ W3C 将其删除） 双
关于 article 和 section ：
1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元
素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
article 元素。

95.html新加的标签

标签名         语义            单/双标签
header 整个页面，或部分区域的头部 双
footer 整个页面，或部分区域的底部 双
nav 导航 双
article 文章、帖子、杂志、新闻、博客、评论等。 双
section
页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含
标题）。 双
aside 侧边栏 双
main 文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用。 双
hgroup 包裹连续的标题，如文章主标题、副标题的组合 （ W3C 将其删除） 双

关于 article 和 section ：
1. artical 里面可以有多个 section 。
2. section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元
素。
3. article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用
article 元素。

progress 标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度
等

datalist 用于搜索框的关键字提示 
details 用于展示问题和答案，或对专有名词进行解释 
summary 写在 details 的里面，用于指定问题或专有名词 

    <input type="text" list="mydata">
    <datalist id="mydata">
    <option value="周冬雨">周冬雨</option>
    <option value="周杰伦">周杰伦</option>
    <option value="温兆伦">温兆伦</option>
    <option value="马冬梅">马冬梅</option>
    </datalist>
    <details>
    <summary>如何走上人生巅峰？</summary>
    <p>一步一步走呗</p>
    </details>


ruby 包裹需要注音的文字 
rt 写注音， rt 标签写在 ruby 的里面 

<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>

mark 标记 

//表单控件新增属性
属性名 功能
placeholder
提示文字（注意：不是默认值， value 是默认值），适用于文字输入类的表
单控件。
required 表示该输入项必填， 适用于除按钮外其他表单控件。
autofocus 自动获取焦点，适用于所有表单控件。
autocomplete
自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。
注意：密码输入框、多行输入框不可用。
pattern
填写正则表达式，适用于文本输入类表单控件。
注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合。

// input 新增属性值
email 邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url url 类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number 数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search 搜索类型的输入框，表单提交时不会验证格式。
tel
电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数
字键盘。
range 范围选择框，默认值为 50 ，表单提交时不会验证格式。
color 颜色选择框，默认值为黑色，表单提交时不会验证格式。
date 日期选择框，默认值为空，表单提交时不会验证格式。
month 月份选择框，默认值为空，表单提交时不会验证格式。
week 周选择框，默认值为空，表单提交时不会验证格式。
time 时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local 日期+时间选择框，默认值为空，表单提交时不会验证格式。

//form 标签新增属性
novalidate 如果给 form 标签设置了该属性，表单提交的时候不再进行验证。

//视频标签<video> 标签用来定义视频，它是双标签
src URL地址 视频地址
width 像素值 设置视频播放器的宽度
height 像素值 设置视频播放器的高度
controls - 向用户显示视频控件（比如播放/暂停按钮）
muted - 视频静音
autoplay - 视频自动播放
loop - 循环播放
poster URL地址 视频封面
preload auto / metadata / none
视频预加载，如果使用 autoplay ，则忽略该属
性。
属性 值 描述
src URL地址 音频地址
controls - 向用户显示音频控件（比如播放/暂停按钮）
autoplay - 音频自动播放
muted - 音频静音
loop - 循环播放
preload auto / metadata / none
音频预加载，如果使用 autoplay ，则忽略该属
性。
none : 不预加载视频。
metadata : 仅预先获取视频的元数据（例如长
度）。
auto : 可以下载整个视频文件，即使用户不希
望使用它。

//<audio> 标签用来定义音频，它是双标签。
src URL地址 音频地址
controls - 向用户显示音频控件（比如播放/暂停按钮）
autoplay - 音频自动播放
muted - 音频静音
loop - 循环播放
preload auto / metadata / none
音频预加载，如果使用 autoplay ，则忽略该属
性。
none : 不预加载视频。
metadata : 仅预先获取视频的元数据（例如长
度）。
auto : 可以下载整个视频文件，即使用户不希
望使用它。


//新增全局属性
contenteditable
表示元素是否可被用户编辑，可选值如下：
true ：可编辑
false ：不可编辑
draggable
表示元素可以被拖动，可选值如下：
true ：可拖动
false ：不可拖动
hidden 隐藏元素
spellcheck
规定是否对元素进行拼写和语法检查，可选值如下：
true ：检查
false ：不检查
contextmenu 规定元素的上下文菜单，在用户鼠标右键点击元素时显示。
data-* 用于存储页面的私有定制数据。

//HTML5兼容性处理
添加元信息，让浏览器处于最优渲染模式。
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->
扩展
lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 逻辑非
示例：
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->
<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]--

96.CSS :global#

在 CSS 局部作用域覆盖默认样式。

// index.module.scss

.father {
  color: green;
}

:global {
  // antd 的默认样式被覆盖
  .ant-form-head {
    color: red;
  }
}

import { Form } from 'antd';
import styles from './index.module.scss';

export default const Hello = () => {
  return (
    <Form>
      <div className={styles.father}></div>
    </Form>
  )
}

97.flex布局我推荐这个链接
19-弹性盒简介 · 语雀

98.

浏览器会缓存JavaScript和CSS文件，以提高页面加载速度和减少网络流量。当浏览器第一次请求一个JavaScript或CSS文件时，它会将该文件缓存到本地磁盘中。当浏览器再次请求该文件时，它会首先检查本地缓存，如果缓存中有该文件，则直接从本地加载，否则会向服务器请求该文件。如果文件已经被修改，可以通过以下方式来强制浏览器重新加载文件：

在URL中添加版本号或时间戳，例如style.css?v=1.0或style.css?t=2023-10-20，这样每次修改文件时，只需要修改版本号或时间戳即可。
在服务器端设置文件的过期时间或缓存控制头，例如Cache-Control和Expires，这样浏览器会在过期时间之前重新请求文件。

总的来说，浏览器会缓存JavaScript和CSS文件，以提高页面加载速度和减少网络流量。如果需要强制浏览器重新加载文件，可以通过添加版本号或时间戳、设置过期时间或缓存控制头等方式来实现。

99.

当在浏览器中输入一个网址时，以下是大致的流程：

浏览器首先检查本地缓存，看是否有该网址的DNS记录。如果有，则直接使用该记录，否则进行DNS查询，以获取该网址对应的IP地址。
浏览器使用该IP地址与服务器建立TCP连接，并发送HTTP请求，请求服务器返回该网址对应的资源（例如HTML、CSS、JavaScript等）。
服务器接收到请求后，处理请求并返回响应，包括HTTP状态码、响应头和响应体等信息。
浏览器接收到响应后，解析响应并渲染页面，包括解析HTML、CSS和JavaScript等文件，并将它们显示在屏幕上。

在这个过程中，浏览器和服务器之间通过TCP协议进行通信，HTTP协议用于定义请求和响应的格式。DNS协议用于将网址转换为IP地址，以便浏览器能够与服务器建立连接。浏览器还会使用缓存来提高页面加载速度和减少网络流量。

100.三次握手和四次挥手

TCP三次握手：

客户端向服务器发送一个SYN包，表示请求建立连接。SYN标志位为1，序列号为x。
服务器接收到客户端的SYN包后，对该包进行确认，并返回一个SYN和ACK标志位都为1的包，表示确认客户端的报文序列号有效，服务器能正常接收客户端发送的数据，并同意创建新连接。服务器的序列号为y，确认号为x+1。
客户端接收到服务器的确认包后，再次向服务器发送一个ACK包，表示确认服务器的报文序列号有效，客户端能正常接收服务器发送的数据，并同意创建新连接。ACK标志位为1，序列号为x+1，确认号为y+1。

TCP四次挥手：

客户端向服务器发送一个FIN包，表示请求关闭连接。FIN标志位为1，序列号为x。
服务器接收到客户端的FIN包后，对该包进行确认，并返回一个ACK标志位为1的包，表示确认客户端的报文序列号有效，服务器能正常接收客户端发送的数据。确认号为x+1。
服务器向客户端发送一个FIN包，表示请求关闭连接。FIN标志位为1，序列号为y。
客户端接收到服务器的FIN包后，对该包进行确认，并返回一个ACK标志位为1的包，表示确认服务器的报文序列号有效，客户端能正常接收服务器发送的数据。确认号为y+1。

在TCP三次握手过程中，客户端和服务器都需要发送至少一个包，因此需要三次握手才能建立TCP连接。在TCP四次挥手过程中，客户端和服务器都需要发送至少一个FIN包和一个ACK包，因此需要四次挥手才能关闭TCP连接。

101.单页面的多页面的区别

单页面应用（SPA）：