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