20210524

日志

一、知识总结

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

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

二、心得体会

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

标签

© 2021 成都云创动力科技有限公司 蜀ICP备20006351号-1