2020-08-16 flex var和let循环的区别

1. flex: 1的含义：
   首先，flex是flex-grow,flex-shrink.flex-basis的缩写

flex: 1; === flex: 1 1 0%;

但是一直以来只知道flex-grow是剩余空间的比例系数,flex-shrink是超出父元素时子元素的收缩的系数,flex-basis 指定了 flex 元素在主轴方向上的初始大小，但是一直不知道到底是怎么一回事，到底应该怎么来计算呢

• flex-grow 属性决定了父元素在空间分配方向上还有剩余空间时，如何分配这些剩余空间。其值为一个权重（也称扩张因子），默认为 0（纯数值，无单位），剩余空间将会按照这个权重来分配。

比如剩余空间为 x，三个元素的 flex-grow 分别为 a，b，c。设 sum 为 a + b + c。那么三个元素将得到剩余空间分别是 x * a / sum, x * b / sum, x * c / sum，是为权重也。

举个例子：

父元素宽度 500px，三个子元素的 width 分别为 100px，150px，100px。

于是剩余空间为 150px

三个元素的 flex-grow 分别是 1，2，3，于是 sum 为 6
则三个元素所得到的多余空间分别是：

150 * 1 / 6 = 25px
150 * 2 / 6 = 50px
150 * 3 / 6 = 75px
三个元素最终的宽度分别为 125px，200px，175px。

100px + 25px = 125px
150px + 50px = 200px
100px + 75px = 175px

• flex-shrink 定义的仅仅只是元素宽度变小的一个权重分量
  举个例子：

父元素 500px。三个子元素分别设置为 150px，200px，300px。

三个子元素的 flex-shrink 的值分别为 1，2，3。

首先，计算子元素溢出多少：150 + 200 + 300 - 500 = -150px。

那这 -150px 将由三个元素的分别收缩一定的量来弥补。

具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。

所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450

三个元素分别收缩：

150 * 1(flex-shrink) * 150(width) / 1450 = -15.5
150 * 2(flex-shrink) * 200(width) / 1450 = -41.4
150 * 3(flex-shrink) * 300(width) / 1450 = -93.1
三个元素的最终宽度分别为：

150 - 15.5 = 134.5
200 - 41.4 = 158.6
300 - 93.1 = 206.9

• flex-basis 指定了 flex 元素在主轴方向上的初始大小，其值可以填具体宽度，百分比，或者auto，当为auto时：无特定宽度值，取决于其它属性值

2. 牛客的一道题
   等主线程任务处理完，也就是全局中的任务var，而let会有块级作用域，所以当主线程执行完，也不会影响每个任务的i
   
3. div p和div>p的区别和div+p的区别

• div p指div后面的p，不仅限于子元素，包括孙子元素
• div>p:仅div内的子元素p
• div+p是div紧跟的p元素，是兄弟关系

4. IPV4:32位
   IPV6:128位

5. 今天看前端兄弟的网易云项目，偶然看到他导入的整个文件夹竟然取到了全部的组件，吓得我自己也去试了试，发现报错了，尴尬…

原来是那个文件夹里面有个index.vue，就跟导入JS一个道理，如果里面有index.js，后面可以省略，至于为啥都能渲染，是因为index.vue引用了其他的组件。。。究极尴尬

6. router-view并不看位置
   今天试了下在子组件left里写 router-view，和父组件center里写，发现都是可以渲染的