前言

花了三天时间，做了俩web版简历。手写一个bootstrap的，还有个修改的模板。都不难，总结一下，清理清理桌面txt文件

1.伪类选择器

p : first - child 找父元素中第一个元素 如果不是p 样式无效

p : first - of - type 找父元素中第一个p元素

还有last-of-type ，nth-of-type

2.两栏自动适应布局

1.Flex

2.BFC

浮动元素设置margin-left（right)  另外一个只需要清除浮动即可

注意浮动盒子和bfc在html中的顺序加载

3.display: grid;

7种实现方法

3.css 3  calc()函数

相比于less，sass，stylus   ，calc（）计算没有单位限制，还可以进行嵌套使用

 居中  .foo { position: absolute  ; top: calc(50% - 150px);left: calc(50% - 150px);}

width:calc(100% - 140px)动态改变宽度

关于calc（）函数的使用

4. css grid布局

CSS Grid 布局完全指南

5.p标签文字溢出

word-break：break-all

6.html设置A4打印宽高

width：1075px ； heigth ：1567px 根据添加内容微调即可

7.text-decoration: line-through 原价划线效果

8.vscode快捷键

ctrl+shift+n 打开一个vscode窗口

ctrl+n 新建一个文件

代码行缩进Ctrl+[， Ctrl+]

Ctrl+C Ctrl+V如果不选中，默认复制或剪切一整行

在当前行下边插入一行Ctrl+Enter

在当前行上方插入一行Ctrl+Shift+Enter

可以连续选择多处，然后一起修改，Alt+Click添加cursor

同时选中所有匹配的Ctrl+Shift+L （Ctrl + F2），Ctrl+D下一个匹配的也被选中（可多选）

跳转到定义处：F12

查找替换 Ctrl+H

整个文件夹中查找 Ctrl+Shift+F

侧边栏显/隐：Ctrl+B

Ctrl+K Ctrl+C  先后按kc       注释 <!--   -->

Shift + Alt + I    在选定的每一行的末尾插入光标

9.一般 js for in 是遍历 key, 而 for of 遍历 value。

10.innerText兼容问题

ie、Safari、Opera和Chrome支持innerText属性。Firefox虽然不支持innerText，但支持作用类似的textContent属性。textContent是DOM3级规定的一个属性，而且也得到了safari、opera和Chrome的支持。

11.e.clientX , e.clientY  e.scrollX,e.scrollY

12 --save 是 生产环境 ， --save-dev是开发环境

13.懒加载也就是延迟加载。

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成同一张图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。

2)页面加载完成后，判断图片是否在用户的视野内（getBoundingClientRect().top和document.documentElement.clientHeight比较），如果在，则将data-original属性中的值取出存放到src属性中。

3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。