1、promise详解
https://blog.csdn.net/yunbabac/article/details/122217783（js高级 promise的使用）
promise.all 表示 所有的都必须是成功的，有一个失败，就是失败（其他可能就不会执行或者监控不到）
promise.allsettled 表示所有的promise都要出状态，返回的是一个数组，而且返回的结果一定是成功。
promise.race 表示竞争，只要一个有结果，整个就以这个结果为准，成功或失败都行
promise.any 表示有一个成功就成功，如果全部失败才会是失败(会全部依次执行一遍)
2、js中的闭包
https://blog.csdn.net/weixin_43558749/article/details/90905723
我们首先知道闭包有3个特性：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
const fn = function () {
const a = 1;
return function () {
return a
}
}
fn()()
代码解析：
1、定义了一个函数，函数中的变量，只能在该函数中定义和使用，
2、函数的返回值是另一个函数，该函数可以通过返回函数获取方法中的值，但是无法修改
3、过往node版本下载地址
https://nodejs.org/zh-cn/download/releases/
下载.msi版本： 是windows安装版本
4、CSS盒模型
https://www.cnblogs.com/qianguyihao/p/7256371.html (css盒模型详解)
https://blog.csdn.net/weixin_44011306/article/details/106961133 (盒子模型)
CSS盒模型和IE盒模型的区别：
在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE盒子模型中，width 和 height 指的是内容区域+border+padding的宽度和高度。
即：标准盒模型：实际宽度是： width + border-left + border-right + padding-left + padding-right(不包含外边距)
IE盒模型：实际宽度是： width;(不包含外边距)
可以使用div设置宽高为0，定义boder属性，进行画图操作。
.abc{
width:0;
height:0;
border: 100px white solid;
border-top-color:green;
border-bottom:none;
}
在 css 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框不会影响内容区域的尺寸，但是会增加 “盒子” 的实际尺寸，故标准盒子模型中 “盒子” 尺寸的计算公式为：
盒子实际尺寸 = 内容尺寸 + 内边距 + 边框宽度。
边框样式：
border-style: solid（实线）、dashed（点划线）、dotted（点虚线）、double（双线）、none
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者！
当一个元素包含在另一个元素中时，它们的上 / 下外边距也会发生合并！
外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并！
虽说是 “怪异” 盒子模型，然而在目前的实际开发中，该模式已经成为主流的盒子模型，诸多前端 UI 框架都会初始化对所有元素采用该盒子模型，可以通过 box-sizing 样式属性设置，需要注意的是该样式存在浏览器兼容性问题，使用时需要添加浏览器内核前缀：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
“怪异” 盒子模型使用优势：（定义的宽度就是实际盒子的宽度）
“怪异” 盒子模型对于百分比宽度布局是有明显便捷性的，布局时无需再去额外计算元素的内边距及边框
box-sizing: content-box|border-box|inherit;
content-box （标准盒子模型）
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box （怪异盒子模型，定义在ul>li上）
为元素设定的宽度和高度决定了元素的边框盒。
就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
5、什么是BFC？
https://blog.csdn.net/sinat_36422236/article/details/88763187 （什么是BFC？看这一篇就够了）
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？
如何创建BFC
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible（overflow为auto scroll和hidden）
Box：css布局的基本单位
Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
BFC的布局规则
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。
触发BFC可以解决：
1、利用BFC避免margin重叠。（外边距垂直方向重合）
2、自适应两栏布局（两栏自适应布局）
3、清除浮动。（浮动元素的父元素高度塌陷）
1、利用BFC避免margin重叠。
原代码 VS 优化后的代码
看看我的 margin是多少
看看我的 margin是多少
优化后的代码
看看我的 margin是多少
看看我的 margin是多少
本质上就是给两个相邻的元素中的一个元素，包一个BFC的div
2、自适应两栏布局
LEFT
RIGHT
优化后的代码
LEFT
RIGHT
本质上就是给一个div设置为BFC
overflow属性说明(overflow 属性规定当内容溢出元素框时发生的事情。)
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
3、清除浮动。
优化后的代码
本质上就是给父节点div设置为BFC
感觉虽然其他方式也可以实现BFC功能，但是最常用的还是overflow：hidden、auto、scroll
float 不为none
display inline-block等
position 不为relative、static
overflow： 不为none、不为visible；
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
6、flex布局
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html （Flex 布局教程：语法篇）
http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html （Flexbox 布局的最简单表单）
https://www.ruanyifeng.com/blog/2015/07/flex-examples.html (Flex 布局教程：实例篇)
https://www.cnblogs.com/hellocd/p/10443237.html （弹性布局（display:flex;）属性详解）
总结：
1、什么是flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
2、flex基本概念
flex基本概念
3、容器的属性
flex-direction \ flex-wrap \ justify-content \ align-items \ align-content \ flex-flow
flex-direction 属性决定主轴的方向（即项目的排列方向）。flex-direction: row | row-reverse | column | column-reverse;
flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content justify-content属性定义了项目在主轴上的对齐方式。justify-content: flex-start | flex-end | center | space-between | space-around;
align-items align-items属性定义项目在交叉轴上如何对齐。align-items: flex-start | flex-end | center | baseline | stretch;
align-content align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
4、项目的属性
order \ flex-grow \ flex-shrink \ flex-basis \ flex \ align-self
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 align-self: auto | flex-start | flex-end | center | baseline | stretch;
flex 这是一个速记属性，设置
flex-grow，flex-shrink和flex-basis。
将它们视为元素应增长或缩小多少的比例论证很有用。0 0 33%基本上只是意味着“占三分之一”，而不再与其他元素成比例地“增长”或“缩小”。
更详细地：
flex-grow
flex-grow CSS属性指定弹性项目的弹性增长因子。它指定项目应在flex容器内占用多少空间。弹性项目的弹性增长因子是相对于弹性容器中其他子项的大小的。
flex-shrink
flex-shrink CSS属性指定弹性项目的弹性收缩系数。当弹性项目的默认宽度大于弹性容器时，弹性项目将根据弹性收缩编号收缩以填充容器。
flex-basis
flex-basis CSS属性指定弹性项目的初始主要尺寸。除非另外使用box-sizing来指定，否则此属性确定内容框的大小。
7、grid布局
http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html （CSS Grid 网格布局教程）
1、概述
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
2、基本概念
2.1 容器和项目
采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。
2.2 行和列
容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。
2.3 单元格
行和列的交叉区域，称为"单元格"（cell）。
2.4 网格线
划分网格的线，称为"网格线"（grid line）。水平网格线划分出行，垂直网格线划分出列。
3、容器属性
3.1 display 属性
display: grid指定一个容器采用网格布局。
注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
3.2 grid-template-columns 属性， grid-template-rows 属性
容器指定了网格布局以后，接着就要划分行和列。grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。
（1）repeat()
有时候，重复写同样的值非常麻烦，尤其网格很多时。
repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。
（2）auto-fill 关键字
有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
（3）fr 关键字
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。
（4）minmax()
minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
（5）auto 关键字
auto关键字表示由浏览器自己决定长度。
（6）网格线的名称
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。
（7）布局实例
grid-template-columns属性对于网页布局非常有用。两栏式布局只需要一行代码。
.wrapper {
display: grid;
grid-template-columns: 70% 30%; // 左边栏设为70%，右边栏设为30%。
grid-template-columns: repeat(12, 1fr); // 传统的十二网格布局，写起来也很容易。
}
3.3 grid-row-gap 属性， grid-column-gap 属性， grid-gap 属性
grid-row-gap属性设置行与行的间隔（行间距），
grid-column-gap属性设置列与列的间隔（列间距）。
grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式，
grid-gap: ;
3.4 grid-template-areas 属性
网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成。grid-template-areas属性用于定义区域。
3.5 grid-auto-flow 属性
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行...。也可以将它设成column，变成"先列后行"。
grid-auto-flow属性除了设置成row和column，还可以设成row dense和column dense。这两个值主要用于，某些项目指定位置以后，剩下的项目怎么自动放置。(设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格。如果将设置改为column dense，表示"先列后行"，并且尽量填满空格。)
3.6 justify-items 属性， align-items 属性， place-items 属性
justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。
.container {
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
}
place-items属性是align-items属性和justify-items属性的合并简写形式。
place-items: ;
3.7 justify-content 属性， align-content 属性， place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置（左中右），align-content属性是整个内容区域的垂直位置（上中下）。
.container {
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content:
3.8 grid-auto-columns 属性， grid-auto-rows 属性
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
3.9 grid-template 属性， grid 属性
grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。
grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。
从易读易写的角度考虑，还是建议不要合并属性!!!
4、项目属性
4.1 grid-column-start 属性， grid-column-end 属性， grid-row-start 属性， grid-row-end 属性
项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线。
除了指定为第几个网格线，还可以指定为网格线的名字。
这四个属性的值还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格。
4.2 grid-column 属性， grid-row 属性
grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。
.item {
grid-column: / ;
grid-row: / ;
}
4.3 grid-area 属性
grid-area属性指定项目放在哪一个区域。
grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。
.item {
grid-area: / / / ;
}
4.4 justify-self 属性， align-self 属性， place-self 属性
justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。
place-self属性是align-self属性和justify-self属性的合并简写形式。
place-self: ;