日志

一、知识总结

1、transform：将元素2D、3D转换

值：

（1）none：不转换

（2）translate（x,y）:2D转换 移动

（3）translate3d(x,y,z):3D 转换

​ ：父元素transform-style:preserve-3d;

（4）translateX(x) ：X 轴的值

（5）translateY(y) : Y 轴的值

（6）translateZ(z) Z 轴的值

​ (7) scale(x[,y]) : 2D 缩放转换

​ (8) scale3d(x,y,z) : 3D 缩放转换

(9) rotate3d(x,y,z,angle) : 3D 旋转 单位：deg

(10) rotateX(angle): X 轴3D 旋转

(11) rotateY(angle) :Y 轴的 3D 旋转

(12) rotateZ(angle) : Z 轴的 3D 旋转

2、transition过渡效果

属性

（1）transition-property：CSS属性的名称、效果
（2）transition-duration transition：效果完成时间
（3）transition-timing-function ：transition效果的转速曲线
（4）transition-delay ：效果的开始

3、动画

（1）animation-name ：选择器关键帧名称

（2）animation-duration ：动画完成的时间

（4）animation-timing-function ：动画的一个周期

（5）animation-delay ：动画开始前的延迟间隔

（6）nimation-iteration-count：动画播放次数

（7）infinite： 无限次

（8）animation-direction ：是否轮流反向播放动画

（9）animation-play-state ：动画正在运行或已暂停

4、排版（布局）

​ 1> 正常布局流属性

​ (1)float:浮动（多列布局）

​ （2)clear:(both/left/right)清楚浮动

​ 2> clear值：
​ left ：停止任何活动的左浮动
​ right ：停止任何活动的右浮动
​ both ：停止任何活动的左右浮动

5、定位（position）

(1) position-static:静态定位（默认）

（2）position-relative:相对定位

（3）position-absolute:绝对定位

（4）position-fixed:固定定位

（5）position-sticky:黏性定位

(7)z-index:对X轴的参考（默认情况下，定位的元素都具有z-index为auto，实际上为0）

6、优先级

样式优先级：内联样式>内部/外部样式>浏览器默认样式

不同选择器优先级：ID选择器>class选择器>标签选择器 改变优先级：！important

7、重复定义样式时：

​ 在 a.css 和 b.css 中使用相同的选择器都定义了对于某个元素的样式属性时，那么谁在后边元素适配谁。

8、选择器比较
（1）Id ：元素的属性值 ，区分大小写 ，作用在一个元素上
（2）Class ：元素的属性值，区分大小写，可自定义，可适配多个不同元素
（3）元素标签：不区分大小写，只能适配同一元素，可以作用多个元素
（4）后代子元素：可适配多个元素，可以使用元素作为选择器的一部分，可以适配所有被包裹的元素

二、心得体会

今天的学习是我真正意义上自己理解，练习题相对来说比较简单，单独练习，算是这五天里面最充实的一天吧。