金大大

### borderWidth可以设置10%吗？ 如果我们有一个宽度未知的块元素，我们的需求是边框宽度是元素宽度的10%，那我们是否可以这样写那？ ```css border: 10% solid #fff; ``` 那？看例子4  发现浏览器给出了`Invalid property value（属性值无效）` 错误，那这是为什么那？ ``` CSS还是根据设计来的。所以要说原因，那就是border的use cases没有百分比的需求。 padding/margin是空白（或者透出背景），其传达意义是通过与非空白的内容区域的对比达成。故空白的大小可能与内容相关，也可能与可用空间相关，后者就是百分比。空白起的是辅助的作用，它本身并不需要特别精确，也就是空白多一点少一点影响不大。 border（通常）是有颜色和图案的。尽管是修饰性的，但与文字、图片等内容一样，它是通过对视觉的直接刺激来传达意义，而不象空白是间接的。border的粗细即使只有1px的变化，对视觉的影响可能很大。设计中一般会将border的宽度视作是确定的，你看border的取值有粗中细，这算是捕捉到的典型的设计需求。至于说border不支持百分比导致无法全部按照百分比设计，这个其实是伪需求。实际我们需要的是padding或margin能支持百分比减去确定的长度，也就是calc功能。 当然，现在CSS3已经增加了vw/vh等相对于viewport的单位（在绝大多数需求情况下可以取代百分比）。所以理论上你是可以做出类似于百分比宽度的border。［注意：Chrome的当前版本不支持vw/vh单位的border-width，FF支持，其他浏览器未测试。］不过设计上是否真的有这样的需求？我个人觉得普通的边框应该是没有的。或许配合border-image可能有。 --贺师俊 ```

### 如何绘制一个宽高相等的元素 最近项目中频繁出现需要绘制宽高相等的元素（宽度不是具体值），那这种需求应该怎么实现那，看例子5: ```css .test { width: 100%; background: red; } .test::before { content: ''; display: block; padding-top: 100%; } ``` 利用伪元素 + padding: 100% (`padding百分比的基准值为父元素的宽度`)撑起了和宽度相等的值，从而达到了宽高相等的效果

### backdrop-filter 在chrome(版本83, 发文时的最高版本)下的 BUG 最近使用中发现了`backdrop-filter`属性，能绘制出一些高级的效果（具体用法MDN）而且发现兼容性也很不错，但是实际使用中发现了个奇怪的bug #### 影响position：fixed （`生成绝对定位的元素，相对于浏览器窗口进行定位。`） ```html html, body { box-sizing: border-box; padding: 0; margin: 0; } .test { margin-top: 100px; width: 100px; height: 100px; background: red;...

### margin重叠问题 我们先看例子6: ```css .test1, .test2 { width: 100px; height: 100px; margin: 10px; background: red; } ```  我们发现垂直方向的margin重叠了，并没有出现我们想要的2个元素距离20px的情况，那这是为什么那？找到一个很好的解释： ``` margin的定义不是让元素移动xxpx，而是这个元素的旁边必须有xxxpx的的空白 ``` 至于解决办法有很多，最简单的就是垂直方向不同时采用 `top` 和 `bottom` 就可以了

### 2. CustomPaint repaint CustomPaint 重复渲染问题 问题类似 https://www.jianshu.com/p/bb2a856a2741 通过RepaintBoundary包裹CustomPaint 解决问题

### 3.animController.animateTo animController.animateTo 目标值为当前值时 代码无法往下进行 具体原因后续查看flutter issue

### typescript编译需要babel吗

### webpack 和webpack-cli的关系

### 6 . 取整 ```js ~~3.125522 // 3 0|3.125522 // 3 parseInt(3.125522) // 3 Math.floor(3.125522) ~~0.0000000003 // 0 parseInt(0.0000000003) // 3 Math.floor(0.0000000003) // 0 ``` 因为 0.0000000003 会使用科学计数法表示为 3e-10，parseInt 会首先把参数转换为字符串，然后解析整数，直到遇到不是数字的值。...

### 7 . 解构在数组上面的应用 ```js const {0:a, 2:b, length:l} = ['foo', 'bar', 'baz'] a // 'foo' b // 'baz' l // 3 ``` ```js const { length: l, [l-1]: last...