本文详细介绍了CSS中的盒子模型，包括标准模型和IE模型，以及如何实现元素的水平垂直居中，提供了多种布局方法。接着讨论了JavaScript的数据类型和存储方式，包括基本类型和引用类型。此外，文章还探讨了响应式设计的概念、原理和实现方法，以及CSS性能优化的常见策略。
文章目录
- 1.说说你对盒子模型的理解？
- 2.如何让一个盒子水平垂直居中,
- 3.说说javascript都有哪些数据类型，如何存储的？
- 4.什么是响应式设计？响应式设计的基本原理是什么？如何做？
- 5.Css性能优化有哪些常见的方法？具体如何实现？
- 6.判断数据类型的方法有哪些？有什么区别？
- 8.说说你对BOM的理解，BOM的核心都有哪些？作用是什么
- 9.Bind,call,apply有什么区别？如何实现一个bind方法？
- 10.如何理解闭包？闭包的应用场景是？
- 11.说说你对同步和异步的区别的理解？
- 12.Css选择器有哪些？优先级是什么？哪些属性可以继承？
- 13.简单说一下什么是事件代理？
- 14.如何理解重回和回流？使用场景
- 20.Javascript本地存储有哪些？区别和使用场景？
1.说说你对盒子模型的理解？
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性，分为标准模型和IE模型，标准模型的宽度不包括内边距，IE模型的宽度要包括内边距。
content：即实际内容，显示文本和图像；
border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成；
padding：即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的background属性影响；
margin：即外边距，在元素外创建格外的空白，空白通常指不能放其他元素的区域。
二、标准模型
盒子总高度 = height + padding + border + margin;
盒子总宽度 = weight + padding + border + margin.
即weight /height 只是内容的宽高度，不包含padding 和margin
三、IE模型
盒子总高度 = height + margin;
盒子总宽度 = weight + margin.
即weight /height 包含了padding和border.
div {
box-sizing:content-box; /*默认标准盒子*/
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
border: 5px black solid;
margin: 30px;
}
.border {
box-sizing:border-box; /*IE盒子*/
}
2.如何让一个盒子水平垂直居中,
方法一:利用定位
父盒子使用相对定位,子盒子使用绝对定位,利用top:50% left:50% 让子盒子相距父盒子上边界,左边界宽高的50% 利用 margin-top margin-left返回子盒子自身宽高的50%
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法二:利用margin:auto
有时候,要实现一些元素水平垂直都居中,这部分元素呢,可能大小未知,例如一些图片或者一些未知大小的块元素,margin:auto会自动去计算子元素和父元素之间的边距，并设为居中。所以就会实现上下左右都居中。
那么还有一个问题，既然居中是有margin：auto来计算实现。为什么还需要将元素设为绝对定位呢？
这是因为margin：auto 默认只会计算左右边距。而上下如果设置为auto时默认是取0.也就是说，margin：auto和margin：0 auto 在一般情况下没有区别，不能实现垂直居中。
但是有了绝对定位后，margin-top和margin-bottom 的值就不是0了，也是通过计算所得。所以能实现垂直居中
代码如下（示例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父盒子设置相对定位 */
.parent {
width: 500px;
height: 500px;
border: 1px solid #000;
position: relative;
}
/* 子盒子设置绝对定位，将top，left，right，bottom设置为0 设置margin为auto 通过计算所得，能实现垂直居中。 */
.child {
width: 100px;
height: 100px;
border: 1px solid #999;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法三:利用display:table-cell
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
/* 会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果 */
display: table-cell;
vertical-align: middle;
text-align: center;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">我是父元素
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法四:利用display:flex
flex布局设置主轴从轴居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
display: flex;
/* 主轴居中 */
justify-content: center;
/* 从轴居中 */
align-items: center;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法五:计算父盒子与子盒子的空间距离(这跟方法一是一个道理)
记得给盒子添加边框,防止产生外边距塌陷的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
/*父盒子添加边边框,防止外边距塌陷*/
border: 1px solid transparent;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
margin-top: 150px;
margin-left: 150px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
方法六: 利用transform(变换)实现居中
这个方法与方法一类似,也是使用子绝夫相,先是让子盒子在父盒子的上和左50%再返回自身宽高的50%,从而来实现居中,在translate中的百分比是相较与自身宽高来计算的,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 父盒子设置相对定位 */
.parent {
width: 500px;
height: 500px;
background-color: blanchedalmond;
position: relative;
}
.child {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
margin: auto;
top: 50%;
left: 50%;
/* translate中的%百分比相对的是自身的 也就是向左向上走自身的%50来实现居中效果 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child">我是子元素</div>
</div>
</body>
</html>
3.说说javascript都有哪些数据类型，如何存储的？
js中的数据类型分类
JavaScript一共有8种数据类型，有7种基本数据类型（原始数据类型、简单数据类型）和1种引用数据类型（复杂数据类型）
基本数据类型：Undefined、Null、Boolean、Number、String、Symbol（es6新增，表示独一无二的值）和BigInt（es10新增）；
引用数据类型：Object（Object本质上是由一组无序的名值对组成的），里面包含 function、Array、Date等。注意：JavaScript不支持任何创建自定义类型的机制，而所有值最终都将是上述 8 种数据类型之一。
js中数据存储方式
基本数据类型：直接存储在栈（stack）中，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储。
引用数据类型：同时存储在栈（stack）和堆（heap）中，占据空间大、大小不固定。引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。
let str1="hello"
let str2="diveng"
let obj={name:"diveng"}
let arr=[2033,'javascript']
字符串str1和str2都是基本类型，变量和值都存储在栈内存中。而obj是对象，arr是数组，属于引用类型，其存储方式为：对象名存储在栈内存中，对象中的属性与属性值都存储在堆内存中，同时在栈内存和堆内存中分别存储一个地址，将二者联系起来，通过栈内存中的地址寻找堆内存中相同的地址。
两种数据类型赋值方式的区别
1.基本类型赋值时，拷贝的是数据
2.应用类型赋值时，拷贝的是地址
栈内存与堆内存的区别
4.什么是响应式设计？响应式设计的基本原理是什么？如何做？
响应式布局：指在同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，移动端再开发一套，pad端再开发一套，而使用响应式布局只要开发一套就够了。
响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整
响应式设计与自适应设计的区别：响应式开发一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；自适应需要开发多套界面，通过检测视口分辨率，来判断当前访问的设备是移动端、PC端、pad端，从而请求服务层，返回不同的页面。
二、响应式实现方式
媒体查询
流体布局（float）
弹性布局（flex）
通过 JavaScript、JQuery 进行判断来显示不同的布局页面
Bootstrap 等第三方框架 。 BootStrap的官网
rem
vw/vh
百分比
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
三、响应式布局优缺点
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
仅适用布局、信息、框架并不复杂的部门类型网站
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
5.Css性能优化有哪些常见的方法？具体如何实现？
1. 使用内联样式
如果给定样式仅用于单个特定页面元素（例如图像滑块或轮播）并且该组件仅用于站点中的少数页面，请使用内联样式而不是通用加载的 CSS 文件。这不仅会减少外部样式表的大小，还会减少在不使用该组件的页面上发生的 CSS 选择器评估的数量。
2. 使用特定的样式
不要将样式应用于通用选择器、后代选择器和顶级 HTML 元素。这样做会触发许多布尔评估。相反，通过选择更细粒度的元素（例如单个类样式）来优化 CSS 性能。
3. 使用 WebComponents 优化 CSS
WebComponents 是自包含的，减少了对共享 CSS 和 JavaScript 的需求，WebComponents 框架是一种相对较新的基于标准的方法，用于创建可重用组件，其中 JavaScript 和样式是自包含和隔离的。当你将组件所需的样式保留在全局共享的 CSS 文件之外时，你不会看到对站点的其他区域的性能影响，因为未使用的样式应用程序会不必要地消耗时钟周期。
4. 拆分你的 CSS 文件
如果你的许多 CSS 文件是针对特定浏览器或设备定制的，请将这些样式分解为多个 CSS 文件。在运行时，仅加载必要的那些。
这个 CSS 性能优化技巧将需要一些客户端 JavaScript 或服务器端处理来完成，但对用户的好处将值得付出额外的努力。
例如，如果移动和桌面呈现显着不同，这可能会在每种设备类型上将文档对象模型 (DOM) 评估的数量减少 50%。
5. 减小 DOM 的大小
用于拆分 CSS 文件的技巧也可用于减小 DOM 的大小。
另一个 CSS 性能优化技巧类似于将 CSS 文件拆分为多个特定于设备的文件。相反，你还可以缩小网页本身的大小，减少 HTML 中 DOM 元素的数量，从而加快客户端渲染速度。
但是，处理 CSS 的问题不仅在于需要应用于页面的样式数量，还在于实际页面上的 DOM 元素数量。许多采用响应式设计的现代网页会在每个页面请求上加载 HTML 源代码，以实现移动和桌面体验。相反，使用客户端 JavaScript 甚至服务器端技术来确保不会将多余的 HTML 加载到永远不会使用它的页面上。这可以显着减少 DOM 大小以及页面需要经过的样式表评估次数。
6.判断数据类型的方法有哪些？有什么区别？
1.typeof
返回表示数据类型的字符串。
一般用来判断基本数据类型（但判断null类型是返回object），typeof 目前能返回string，number，boolean，symbol（ES6新增基本数据类型，表示独一无二的值，使用 symbol 作为属性名可以保证不会出现同名属性），bigint（es10新增一种基本数据类型，BigInt 可以表示任意大的整数，整数溢出将不再是问题。），unfined，object，function这八种判断类型。
typeof 运算符的问题是无论引用的对象是什么类型,它都返回object
2.instanceof
返回布尔值。
一般用来检测引用数据类型，如：Object，Function，Array，Date，RegExp等。
A instanceof B 判断A是否是B的实例，根本就是判断B.protoytpe是否在A的原型链上，所以无法判断具体是哪一种数据类型，arr instanceof Object=true,arr instanceof Array=true。
实现instanceof:
function instance_of(L, R) { // L 表示instanceof左边，R 表示instanceof右边
let O = R.prototype; // 取 R 的显示原型
L = L.__proto__; // 取 L 的隐式原型
while (true) { // 循环执行，直到 O 严格等于 L
if (L === null) return false;
if (O === L) return true;
L = L.__proto__;
}
}
3.Object.prototype.toString.call()
返回为[object,xxx]格式的字符串，xxx即判断数据的具体类型。
基本上所有对象的类型都可以通过这个方法获取到。
使用Object.prototype.toString.call()的方式来判断一个变量的类型是最准确的方法。
原理：每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [Object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文
4.constructor
constructor是原型对象的属性，指向构造函数。a.constructor==b。判断b是不是a的构造函数。
null和undefined是无效的对象，因此是不会有constructor存在的，所以constructor判断不了这两种类型。
JS对象的constructor是不稳定的，当开发者重写prototype后，原有的constructor会丢失，constructor会默认为Object
undefined和null的区别：
当声明的变量还未被初始化时，变量的默认值为undefined。
null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
null表示"没有对象"，即该处不应该有值。典型用法是：
（1） 作为函数的参数，表示该函数的参数不是对象。
（2） 作为对象原型链的终点。
undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
（1）变量被声明了，但没有赋值时，就等于undefined。
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
（3）对象没有赋值的属性，该属性的值为undefined。
（4）函数没有返回值时，默认返回undefined。
8.说说你对BOM的理解，BOM的核心都有哪些？作用是什么
1.Browser Object Model： 浏览器对象模型
2、作用：
（1）可以操作浏览器窗口及浏览器窗口中的控件（标签）：即可以在JavaScript程序中操作标签
（2）实现页面和用户之间的动态交互
3、浏览器对象：一系列浏览器内置对象的统称
4、浏览器对象模型：内置对象之间按照某种层次组织起来的结构
二、BOM对象
1、window对象：浏览器窗口对象，是BOM的核心，BOM的其他内置对象可以作为window的属性
2、document对象：文档对象，是DOM的核心
3、location对象：地址对象。浏览器的地址栏
4、history对象：历史对象。浏览器的访问记录，可以实现前进和后退。
5、navigator对象：浏览器对象，又称为浏览器的嗅探器。通过它可以得到浏览器的版本信息、名称、内核等信息
6、screen对象：屏幕对象。用于获取和屏幕有关的数据。例如屏幕分辨率
9.Bind,call,apply有什么区别？如何实现一个bind方法？
bind()方法创建一个新的函数，将传入的对象绑定为新函数的this值，并返回一个新函数。这个新函数可以在以后的任何时间被调用，并且this值始终指向绑定的对象。
call()方法调用一个函数，并将一个对象作为函数执行时的上下文(this 值)，以及一个参数列表传递给函数。
apply()方法也调用一个函数，但是它接受一个数组作为参数，数组中的每个元素将被视为函数的一个参数。第一个参数仍然是函数执行时的上下文。
实现一个bind()方法的基本思路是：
返回一个新的函数，该函数在调用时将传入的对象作为其上下文对象(this 值)。
返回的函数应该接受任意数量的参数，这些参数在调用时应该作为原始函数的参数传递。
如果返回的函数被用作构造函数(使用 new 关键字)，则应该创建一个新对象并使用原始函数的原型继承它，然后使用新对象作为上下文对象来调用原始函数，并将其参数传递给原始函数。
如果返回的函数被直接调用，则只需要将参数传递给原始函数。
下面是一个简单的实现：
Function.prototype.myBind = function(context, ...args) {
const fn = this;
return function(...innerArgs) {
if (this instanceof fn) {
return new fn(...args, ...innerArgs);
}
return fn.apply(context, [...args, ...innerArgs]);
}
};
这个myBind()方法接受一个context参数作为上下文对象，并返回一个新函数。新函数会将传入的参数args 与在调用时传递给新函数的参数innerArgs合并，并将它们传递给原始函数。如果新函数被调用时使用new关键字，则它会创建一个新对象，并将它作为上下文对象使用，然后将参数传递给原始函数。否则，它将使用传入的 context对象作为上下文对象来调用原始函数，并将参数传递给它。
10.如何理解闭包？闭包的应用场景是？
一、闭包的特性
函数嵌套函数
函数内部可以引用外部的参数和变量
参数和变量不会被垃圾回收机制回收
二、闭包的定义及其优缺点
定义：
闭包 是指有权访问另一个函数作用域中的变量的函数，创建闭包的最常见的方式就是在一个函数内创建另一个函数，通过另一个函数访问这个函数的局部变量
缺点：
闭包的缺点就是常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。
存在闭包的原因：
内部的函数存在外部作用域的引用就会导致闭包。
闭包是javascript语言的一大特点，主要应用闭包场合主要是为了：设计私有的方法和变量。
一般函数执行完毕后，局部活动对象就被销毁，内存中仅仅保存全局作用域。但闭包的情况不同！
11.说说你对同步和异步的区别的理解？
同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，在相应用户，用户体验不好。
同步的思想是：所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。
同步如打电话，通信双方不能断（我们是同时进行，同步），你一句我一句，这样的好处是，对方想表达的信息我马上能收到，但是，我在打着电话，我无法做别的事情。
异步，不用等所有操作等做完，就相应用户请求。即先相应用户请求，然后慢慢去写数据库，用户体验较好。
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。
异步如收发收短信，对比打电话，打电话我一定要在电话的旁边听着，保证双方都在线，而收发短信，对方不用保证此刻我一定在手机旁，同时，我也不用时刻留意手机有没有来短信。这样的话，我看着视频，然后来了短信，我就处理短信（也可以不处理），接着再看视频。
区别：
同步和异步的区别是同步是阻塞模式，异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去。异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
12.Css选择器有哪些？优先级是什么？哪些属性可以继承？
关于css属性选择器常用的有：
id选择器（#box），选择id为box的元素
类选择器（.one），选择类名为one的所有元素
标签选择器（div），选择标签为div的所有元素
后代选择器（#box div），选择id为box元素内部所有的div元素
子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
群组选择器（div,p），选择div、p的所有元素
还有一些使用频率相对没那么多的选择器：
伪类选择器：
:link ：选择未被访问的链接
:visited：选取已被访问的链接
:active：选择活动链接
:hover ：鼠标指针浮动在上面的元素
:focus ：选择具有焦点的
:first-child：父元素的首个子元素
伪元素选择器：
:first-letter ：用于选取指定选择器的首字母
:first-line ：选取指定选择器的首行
:before : 选择器在被选元素的内容前面插入内容
:after : 选择器在被选元素的内容后面插入内容
属性选择器：
[attribute] 选择带有attribute属性的元素
[attribute=value] 选择所有使用attribute=value的元素
[attribute~=value] 选择attribute属性包含value的元素
[attribute|=value]：选择attribute属性以value开头的元素
在CSS3中新增的选择器有如下：
层次选择器（p~ul），选择前面有p元素的每个ul元素
伪类选择器：
:first-of-type 父元素的首个元素
:last-of-type 父元素的最后一个元素
:only-of-type 父元素的特定类型的唯一子元素
:only-child 父元素中唯一子元素
:nth-child(n) 选择父元素中第N个子元素
:nth-last-of-type(n) 选择父元素中第N个子元素，从后往前
:last-child 父元素的最后一个元素
:root 设置HTML文档
:empty 指定空的元素
:enabled 选择被禁用元素
:disabled 选择被禁用元素
:checked 选择选中的元素
:not(selector) 选择非 元素的所有元素
属性选择器:
[attribute*=value]：选择attribute属性值包含value的所有元素
[attribute^=value]：选择attribute属性开头为value的所有元素
[attribute$=value]：选择attribute属性结尾为value的所有元素
优先级
内联 > ID选择器 > 类选择器 > 标签选择器
到具体的计算层⾯，优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
如果存在内联样式，那么 A = 1, 否则 A = 0
B的值等于 ID选择器出现的次数
C的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数
D 的值等于 标签选择器 和 伪元素 出现的总次数
#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
因为没有内联样式 ，所以 A = 0
ID选择器总共出现了1次， B = 1
类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1
标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)
知道了优先级是如何计算之后，就来看看比较规则：
从左往右依次进行比较 ，较大者优先级更高
如果相等，则继续往右移动一位进行比较
如果4位全部相等，则后面的会覆盖前面的
经过上面的优先级计算规则，我们知道内联样式的优先级最高，如果外部样式需要覆盖内联样式，就需要使用!Important
继承属性：
在css中，继承是指的是给父元素设置一些属性，后代元素会自动拥有这些属性
关于继承属性，可以分成：
字体系列属性
文本系列属性：
元素可见性
表格布局属性
列表属性
引用
光标属性
继承中比较特殊的几点：
a 标签的字体颜色不能被继承
h1-h6标签字体的大下也是不能被继承的
无继承的属性:
display
文本属性：vertical-align、text-decoration
盒子模型的属性：宽度、高度、内外边距、边框等
背景属性：背景图片、颜色、位置等
定位属性：浮动、清除浮动、定位position等
生成内容属性：content、counter-reset、counter-increment
轮廓样式属性：outline-style、outline-width、outline-color、outline
页面样式属性：size、page-break-before、page-break-after
13.简单说一下什么是事件代理？
事件代理又叫事件委托，是在网页设计中的一种设计思想，即把一个或者一组元素（目标元素）的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素，⽽不是⽬标元素。
当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执⾏函数。
举个例子——疫情封寝的时候，一个寝室大家都要买饭，如果每个人都出去就很麻烦，这时就委托一个志愿者帮忙给寝室每个人带饭，然后把饭分给每个人，这个就是事件代理。
优点：
（1）降低性能的消耗，减少整个⻚⾯所需的内存，提升整体性能（减少冗余，节约资源）
（2）可以实现动态绑定，减少重复⼯作
局限性：
（1）有些事件（没有冒泡特性的）不可以用事件代理进行绑定，比如focus、blur
（2）mousemove 、 mouseout 这样的事件，虽然有事件冒泡，但是需要不断计算位置定位，对性能消耗高，也是不适合用事件代理的
（3）如果把所有事件都⽤事件代理，可能会出现事件误判，即本不该被触发的事件被绑定上了事件
主要解决的问题：
解决静态的事件绑定问题；解决业务相同，而性能消耗却更高的问题。
适合用事件代理的事件：
click、mousedown、mouseup、keydown、keyup、keypress
14.如何理解重回和回流？使用场景
一、什么是回流？
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时，浏览器会重新渲染部分或者全部文档的过程就称为回流
下面这些操作会导致回流:
页面的首次渲染
浏览器的窗口大小发生变化
元素的内容发生变化
元素的尺寸或者位置发生变化
元素的字体大小发生变化
激活CSS伪类
查询某些属性或者调用某些方法
添加或者删除可见的DOM元素
在触发回流(重排)的时候，由于浏览器染页面是基于流式布局的，所以当触发回流时，会导致周围的DOM元素重新排列，它的影响范围有两种：
全局范围: 从根节点开始，对整个渲染树进行重新布局
局部范围:对渲染树的某部分或者一个渲染对象进行重新布局
二、什么是重绘？
当页面中某些元素的样式发生变化，但是不会影响其在文档流中的位置时，浏览器就会对元素进行重新绘制，这人过程就是重绘。
下面这些操作会导致重绘:
color、background 相关属性: background-color、background-image等。
outline 相关属性: outline-color、 outline-width 、text-decoration
border-radius、 visibility、 box-shadow
可以把页面理解为一个黑板，黑板上有一朵画好的小花。现在我们要把这朵从左边移到了右边，那我们要先确定好右边的具体位置，画好形状（回流），再画上它原有的颜色（重绘）
**注意: 当触发回流时，一定会触发重绘，但是重绘不一定会引发回流 （触发回流一定会触发重绘）
**
三、如何避免回流与重绘?
减少回流与重绘的措施:
操作DOM时，尽量在低层级的DOM节点进行操作 不要使用 table 布局，一个小的改动可能会使整人 table 进行重新布局
使用CSS的表达式 不要频繁操作元素的样式，对于静态页面，可以修改类名，而不是样式
使用absolute或者fixed，使元素脱离文档流，这样他们发生变化就不会影响其他元素 避免频繁操作DOM，可以创建一个文档片段
documentFragment ，在它上面应用所有DOM操作，最后再把它添加到文档中 将元素先设置 display:
none操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
将DOM的多人读操作(或者写操作) 放在一起，而不是读写操作穿插着写。这得益干浏览器的渲染队列机制。
浏览器针对页面的回流与重绘，进行了自身的优化染队列
20.Javascript本地存储有哪些？区别和使用场景？
javaScript本地缓存的方法我们主要讲述以下四种：
cookie
sessionStorage
localStorage
indexedDB
Cookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决 HTTP无状态导致的问题
作为一段一般不超过 4KB 的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制
cookie有效期、安全性、使用范围的可选属性组成但是cookie在每次请求中都会被发送，如果不使用 HTTPS并对其加密，其保存的信息很容易被窃取，导致安全风险。举个例子，在一些使用
cookie保持登录态的网站上，如果 cookie被窃取，他人很容易利用你的 cookie来假扮成你登录网站
localStorage
HTML5新方法，IE8及以上浏览器都兼容
#特点
生命周期：持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的
存储的信息在同一域中是共享的
当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件。
大小：5M（跟浏览器厂商有关系）
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
受同源策略的限制
sessionStorage
sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦页面（会话）关闭，sessionStorage 将会删除数据
#扩展的前端存储方式
indexedDB是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索
虽然 Web Storage对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太有用。IndexedDB提供了一个解决方案
#优点：
储存量理论上没有上限
所有操作都是异步的，相比 LocalStorage 同步操作性能更高，尤其是数据量较大时
原生支持储存JS的对象
是个正经的数据库，意味着数据库能干的事它都能干
#缺点：
操作非常繁琐
本身有一定门槛
关于indexedDB的使用基本使用步骤如下：
打开数据库并且开始一个事务
创建一个 object store
构建一个请求来执行一些数据库操作，像增加或提取数据等。
通过监听正确类型的 DOM 事件以等待操作完成。
在操作结果上进行一些操作（可以在 request对象中找到）
关于使用indexdb的使用会比较繁琐，大家可以通过使用Godb.js库进行缓存，最大化的降低操作难度
#二、区别
关于cookie、sessionStorage、localStorage三者的区别主要如下：
存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
#三、应用场景
在了解了上述的前端的缓存方式后，我们可以看看针对不对场景的使用选择：
标记用户与跟踪用户行为的情况，推荐使用cookie
适合长期保存在本地的数据（令牌），推荐使用localStorage
敏感账号一次性登录，推荐使用sessionStorage
存储大量数据的情况、在线文档（富文本编辑器）保存编辑历史的情况，推荐使用indexedDB
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
