LAPTOP-6S99CCC4_20210524-郭倩

工作日志

一、知识总结

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

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

二、心得体会

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

标签

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