常用记录（工作）

css

box-sizing

• box-sizing: content-box 默认值，设置的宽高不包括padding,margin。
• box-sizing: border-box 设置的宽高包括padding,margin。

css书写顺序

1. 定位属性：position display float left top right bottom overflow clear z-index
2. 自身属性：width height padding border margin background
3. 文字样式：font-family font-size font-style font-weight color
4. 文本属性：text-align vertical-align text-decoration letter-spacing white-space
5. css3中新增属性：content box-shadow border-radius transform

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

浏览器是根据css样式的书写顺序其按照dom树的结构分布render样式，完成构建render树，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照1 2 3 4 5。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。
设置display:none的节点不会被放在render树中，但会在dom树中

css选择器

1. id选择器： #test
   不提倡用id 去写样式，id选择器的权重太高了（100），这在一些项目中会造成灾难性的样式污染，以及权重陷阱。 id 主要是应用在js文件，通过id查询dom的速度是最快的
2. 类选择器： .test
3. 标签选择器： div
4. 交集选择器：（标签指定式选择器）div.test 选择div中class="test"的元素
   两个选择器之间不能有空格
5. 后代选择器： .test div
6. 并集选择器： div , .test div和class="test"的元素
7. 子元素选择器： .test > div > p 选择.test下的div下的p元素
8. 属性选择器：a[href] 只对有 href 属性的锚（a 元素）应用样式
9. 伪类选择器：:link :visited :hover :active :focus :first-child() :nth-child()
   伪类用一个冒号来表示，因为基于文档之外的抽象，所以叫伪类
10. 伪元素选择器：::first-letter，::first-line，::before，::after， ::selection
    伪元素则用两个冒号来表示，通过添加一个实际的元素才能达到的

JS

字符串截取

const email = “candiceyu@heihei.come”;
const name = email.split(’@’)[0];

RXJS

import { finalize } from ‘rxjs/operators’;
.pipe(finalize(() => (this.loading = false))).subscribe((res:any)=>{})

import { timer } from ‘rxjs’;
timer(0).subscribe(() => console.log(‘timer’));