工作日志

一、知识总结

1.cursor就是用来定义鼠标样式，cursor可选值有pointer、wait、help、copy、crosshair。

2.学习了cursor、url auto并进行了研究；

3.transform是css3的属性，该属性应用于元素的2D或3D转换，我们今天针对元素的2D或3D转换进行了一系列的练习与研究：

none：不进行转换、translate（x，y）：2D转换、translate3d(x,y,z) ：3D转换

translateX(x) 用 X 轴的值进行转换；translateY(y)用 Y 轴的值进行转换；translateZ(z) 用 Z 轴的值进行转换。

滚动条样式：::-webkit-scrollbar（宽高），::-webkit-scrollbar-track （轨道）

4、transform：2D或3D转换，常用值有none-不转换 ，translate(x,y)-2D转换移动 ，translate3d(x,y,z)-3D转换，translateX(x)-只变x轴，translateY(y)-只变y轴，translateZ(z)-只变z轴

5、transition：元素过度效果，属性有transition-property-指定CSS属性的name，transition效果，transition-duration-设定效果多长时间完成

7、transition-timing-function：转换的曲线，值有linear-相同速度开始到结束，ease-慢开-快-慢结束，ease-in-慢开，ease-out 慢结束，ease-in-out慢开始慢结束

8.动画

（1）作用：动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色

（2）属性值：

animation-name :指定要绑定到选择器的关键帧的名称

animation-iteration-count：定义动画的播放次数。infinite 无限次

9.排版布局

（1）作用：控制它们相对正常布局流、周边元素、父容器或者
主视口/窗口的位置。

（2）布局流包括：属性，弹性盒子，网格，浮动，定位，css表格布局，多列布局

<1>.float 浮动 ：用于控制它们相对正常布局流、周边元素、父容器或者
主视口/窗口的位置。

<2>.清除浮动

clear：属性，当你把这个应用到一个元素上时，它主要意味着"此处停止浮动"——这个元素和源码中后面的元素将不浮动，除非将一个新的 float 声明应用到此后的另一个元素。

clear可以取三个值如下：

left：停止任何活动的左浮动

right：停止任何活动的左浮动

both：停止任何活动的左浮动

10.定位： 定位允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个元素的上面，或者始终保持在浏览器视窗内的同一位置。

（1）相对定位

postion:relative

与对于上一个文档流进行移动

（2）绝对定位

position:absolute

生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定
位的元素不再存在于正常文档布局流中。

（3）固定定位

fixed

固定定位固定元素是相对于浏览器视口本身。

（4）粘性定位

position：sticky

到达某个阈值点的相对定位

二、心得体会

​ 今天的内容很复杂，简单来说就是感觉很模糊，比前几天的感觉都难一点儿，不过我也在努力的去学懂它，可能是我基础不好，所以关于老师上的课我都很吃力，下课后我偶尔会找一些同学来给我讲讲用法以及会问问如何做，今天的问题主要是关于绝对定位这块儿不是很懂。