这是我参与「第四届青训营 」笔记创作活动的第6天
移动端WEB
平面转换
过渡：transition:all 1s;
1、位移：transform :translate(水平移动距离，垂直移动距离);右下为正 百分比或像素
2、旋转：transform:rotate(角度); 角度单位deg 正为顺时针旋转
3、转换原点：transform-origin:left top right bottom center 属性用空格隔开(写在标签里而不是伪类)
4、多重转换：transform:translate() rotate(); 旋转会改变坐标轴向 一般写在最后面
5、缩放：transform:scale(缩放倍数);大于1指放大
6、渐变：background-image:linear-gradient(颜色1,颜色2,...);
空间转换
1、transform :translate3d(x,y,z);
2、透视效果：perspective：建议取800~1200px 写在盒子的父级 近大远小
动画
1、定义动画
2、使用动画 animation:动画名称 动画花费时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态
3、百分比指动画总时长的占比
4、animation： infinite（动画无限循环）
5、animation：alternate（动画方向有正有反） 常用
6、animation：forwards（动画停留在最终状态）
7、动画名称与时长必须赋值，其他属性看需求
8、多组动画：animation：动画1，动画2，动画n;
CSS笔记
1、一个标签可以使用多个类名
2、id选择器 #id
3、一个标签只能有一个id属性值
4、通配符选择器 * 对页面所有标签设置样式
5、文字样式：
- 字体大小:font-size 14px
- 字体粗细：font-weigth:normal（正常400） bold（加粗700）
- 字体样式：font-style：normal（正常） italic（倾斜）
- 字体系列：font-family：sans-serif
- 字体复合：font：style weight size/line-height family
- 文本缩进：text-indent 2em（em:当前标签font-size的大小）
- 文本水平对齐：text-align：left right center（span a input img）
- 文本修饰：text-decoration：underline（下划线） line-through（删除线） none（无线修饰） overline（上划线）
- 行高：line-height：数字+px 14px 倍数 3（当前标签font-size的倍数）
- 文字颜色：color：red rbg(,,) rbga(,,) #000
- 垂直居中：行高等于高度
6、css层叠性 覆盖
7、后代选择器：选择器1 选择器2 div p{} 找到div里的p 选择所有后代
8、子代选择器：选择器1>选择器2 只选择子代
9、并集选择器： 选择器1，选择器2 同时选择多组标签
10、交集选择器：选择器1.选择器2
11、伪类选择器：选择器：hover
12、背景颜色：background-color
13、背景图片：background-image：url（‘图片路径’）
14、背景平铺：background-repeat：repeat（水平垂直都平铺） no-repeat（不平铺） repeat-x（y）默认平铺
15、背景位置：background-position：center center 50px 50px 右下为正
16、背景连写：background：color imag repeat position
17、元素显示模式转换：display：block'转换成块级元素 inline-block 转换成行内块元素 inline 转换成行内元素
盒子模型
1、边框：border：1px solid #000 solid：实线 dashed：虚线 dotted：点线
2、border会撑大盒子的尺寸
3、内边距 padding：10px 20px 30px 10px 上右下左 padding也会撑大盒子
4、用padding撑开盒子宽度，不必设置宽度
5、自动内减： box-sizing:border-box;
6、外边距：margin 与padding类似
7、清除默认内外边距： *{margin:0; padding:0;}
8、版心居中：margin：0 auto
9、list-style:none去除li前面的小点
10、外边距折叠问题
