css
box-sizing
- box-sizing: content-box 默认值,设置的宽高不包括padding,margin。
- box-sizing: border-box 设置的宽高包括padding,margin。
css书写顺序
- 定位属性:position display float left top right bottom overflow clear z-index
- 自身属性:width height padding border margin background
- 文字样式:font-family font-size font-style font-weight color
- 文本属性:text-align vertical-align text-decoration letter-spacing white-space
- 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选择器
- id选择器: #test
不提倡用id 去写样式,id选择器的权重太高了(100),这在一些项目中会造成灾难性的样式污染,以及权重陷阱。 id 主要是应用在js文件,通过id查询dom的速度是最快的 - 类选择器: .test
- 标签选择器: div
- 交集选择器:(标签指定式选择器)div.test 选择div中class="test"的元素
两个选择器之间不能有空格 - 后代选择器: .test div
- 并集选择器: div , .test div和class="test"的元素
- 子元素选择器: .test > div > p 选择.test下的div下的p元素
- 属性选择器:a[href] 只对有 href 属性的锚(a 元素)应用样式
- 伪类选择器::link :visited :hover :active :focus :first-child() :nth-child()
伪类用一个冒号来表示,因为基于文档之外的抽象,所以叫伪类 - 伪元素选择器:::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’));