这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
css cascading style sheets 层叠样式表
- 使用css的三种方法 a.外链 href="" b.嵌入 c.内联
- 选择器+属性+值 a.选择器：通配、id、类、属性、伪类 b.伪类：:link-默认 :visited-访问过 :hover :active :focus :first-child :last-child :nth()-child c.组合：直接组合AB 后代组合A_B 亲子组合A>B 兄弟组合A~B 相邻组合A+B d.[href^="#"]以#开头 [href$=".jpg"]以.jpg结尾
- 颜色 a.rgb/rgba b.hsl(HUe:色相,Saturation:饱和度,lightness:亮度) 取值0-360 0-100% 0-100%
- 字体 a.serif-衬线体 sans-serif-无衬线体 cursive-手写体 monospace-等宽字体 b.font-size c.font-weight 100-900 normal-400 bold-700
- 处理空白 white-space a.normal 多个空白转为一个 b.nowrap 强制不换行 c.pre 格式和原来一样 d.pre-wrap换行多个空格保留 e.pre-line合并空格换行
- 优先级-特异度 # . E id 类 标签
- 继承-inherit 和文字相关的属性都可以继承，和盒模型相关的都是不可继承的
- 布局 a.常规流：inline-formatting-context、bfc、表格布局、flex、grid b.浮动流：float c.绝对定位：position
其中给我印象最深刻的是float回归最初的需求
下面是关于canvas的知识
一、canvas基础知识
1.两套width和height
a.css控制的是标签本身的大小
b.内置元素控制的是绘图面的大小
c.今后使用canvas的时候吗，都用标签内width和height设置canvas的尺寸，避免出错
2.canvas转为图片的base64编码格式
canvas.toDataURL('image/jpeg',1);
a.前面的参数可选 image/webp | image/png
b.后面的参数取值在0-1之间与图片质量成正比
3.canvas转为二进制大对象
canvas.toBlob('callback, type ,1);
a.传入callback里面参数经过后面参数处理的blob对象
b.后面的两个参数同上
4.绘图面的绘图环境栈
context.save()
a.保存这个绘图环境状态到栈中
context.restore()
b.从之前的状态栈释放绘图环境状态
