日志

一、知识点总结

1、cursor 用于定义鼠标样式

cursor: url(xxx),auto;

2、transform 应用于元素的2D或3D转换，它常用的值有

（1）none 定义不进行转换

（2）translate(x,y) 定义 2D 转换

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

（4）translateX(x)用于转换 X 轴的值

（5）translateY(y) 用于转换Y 轴的值

（6）translateZ(z) 用于转换 Z 轴的值

3、transition 设置元素当过渡效果，它的属性有

transition-duration transition指定完成时间

4、动画语法

@keyframes animationName{
from {}
to {}
}

（1）animation-name 绑定到选择器的关键帧的名称

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

（3）animation-iteration-count定义动画的播放次数，infinite 循环限次

（4）animation-play-state 指定动画是否正在运行或已暂停。

5、布局

（1）布局的正确顺序：正常布局流、display 属性、弹性盒子、网格、浮动、定位、CSS 表格布局、多列布局

6、float 浮动

使用fioat使图片周围的文本浮起来

img {
float: left;
margin-right: 30px;
}

多列浮动

body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}

清除浮动chear

（1）left ：停止左浮动 （2）right ：停止右浮动 （3）both ：停止左右浮动

7、定位 position

（1）静态定位staitc

（2）相对定位position:relative；需要添加值top ， bottom ， left 和right

（3）绝对定位position:absolute;

（4）固定定位fixed

二、心得体会

​ 今天又是在知识的道路上前进的一天，讲的东西掌握的还行，主要学习了动画与浮动，操作掌握的也还行，但是还是感觉那些属性和属性值记不住，操作练习的时候找半天，英语不太好，看见就头大。。。