20210524-马金娟

工作日志

transform

transform 是 css3 的属性,、修改滚动条样式

该属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

none 定义不进行转换。
translate(x,y) 定义 2D 转换。移动
translate3d(x,y,z) 定义 3D 转换。(父元素: transform-style: preserve-3d;)
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义转换,只是用 Z 轴的值。

transition 过滤

属性:

transition-property 指定CSS属性的name,transition效果
transition-duration transition效果需要指定多少秒或毫秒才能完成
transition-timing-function 指定transition效果的转速曲线
transition-delay 定义transition效果开始的时候

动画

动画 逐渐地从一个值变化到另一个值

animation-name 指定要绑定到选择器的关键帧的名称
animation-duration 动画指定需要多少秒或毫秒完成

animation-timingfunction 设置动画将如何完成一个周期
animation-delay 设置动画在启动前的延迟间隔。
animation-iterationcount
定义动画的播放次数。infinite 无限次
animation-direction 指定是否应该轮流反向播放动画。

布局

CSS页面布局技术拾取网页中的元素,并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置上。

有下列几种不同的技术:

正常布局流
display 属性
弹性盒子
网格
浮动
定位
CSS 表格布局
多列布局

HTML元素完全按照源码中出现的先后次序显示——第一个段落、无序列表、第二个段落。

正常布局流(normal flow)是指在不对页面进行任何布局控制时,浏览器默认的HTML布局方式。

浮动

浮动内容遵循盒子模型诸如外边距和边界。

float 属性用于在网页上创建多列布局

默认子元素将跨越整个body宽度的100%。

脱离文档流,不占原来的文档流位置

浮动元素在父元素中所占的面积的有效高度为0
非浮动元素的外边距不能用于它们和浮动元素之间来创建空间

定位

定位( position ):从正常的文档流布局中取出元素,并使它们具有不同的行为

静态定位

静态( staitc )定位:默认值,将元素放入它在文档布局流中的正常
位置。父元素默认情况下 position 属性都是 static

相对定位

相对定位与静态定位非常相似,

给元素加上 position:relative; 并不会改变元素的位置,需要使用 top , bottom , left 和
right 属性。

绝对定位:position:absolute;

固定定位:

fixed 固定定位,这与绝对定位的工作方式完全相同

区别:绝对定位固定元素是相对于 元素或其最近的定位祖先,而固定定位固定元素则是相对于浏览器视口本身。

position: sticky

是一种相对位置和固定位置的混合体,允许被定位的元素表现得像相对定位一样,直到它滚动到某个阈值点为止,此后它就变得固定了。

心得

通过本节课的学习,练题时比之前熟练了很多,今天做题的时候相比前二天来说好了很多,老师讲的也很仔细,希望在今后的实训过程中才可以掌握更多的知识,也希望我们的培训工作更加顺利的进行。

标签

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