日志

一、知识总结

1、transform

tansform:是 css3 的属性，该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，

移动，倾斜等。

常用的值有：

none 定义不进行转换。

translate(x,y)： 定义 2D 转换。

translate3d(x,y,z) ：定义 3D 转换。

translateX(x) ：定义转换，只是用 X 轴的值。

translateY(y)： 定义转换，只是用 Y 轴的值。

translateZ(z) ：定义转换，只是用 Z 轴的值。

2、transition

（1）transitionn ：是指属性设置元素当过渡效果

其属性及其属性值：

transition-property ：指定CSS属性的name，transition效果

transition-duration transition：效果需要指定多少秒或毫秒才能完成

transition-timing-function ：指定transition效果的转速曲线

transition-delay ：定义transition效果开始的时候

（2）transition-timing-function 常用的值有：

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

3、动画

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

（2）属性值：

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

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

4、排版布局

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

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

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

<2>.清除浮动

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

clear可以取三个值如下：

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

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

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

5、定位

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

（1）相对定位

postion:relative

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

（2）绝对定位

position:absolute

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

（3）固定定位

fixed

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

（4）粘性定位

position：sticky

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

二、心得体会

相比于第一天刚来时，现在每讲完一节基本上都会留给练习的时间，这样能够对刚讲的知识进行加深，老师布置的作业不多但是由于对知识的理解还是不够深刻，导致每天晚上作业做的都很艰难。