这是我参与「第四届青训营 」笔记创作活动的第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、外边距折叠问题