工作总结

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 轴的值。

动画

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

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

布局

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

有下列几种不同的技术：

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

他们有各自的用途，有优势也有劣势，在使用过程中是相互辅助的。

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

浮动

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

浮动内容随着盒子模型外边距和边界。通过设置图片右侧的外边距就能阻止右侧的文字紧贴着图片。

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

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

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

6 position: sticky

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

学习心得

通过今天的学习，使我了解了浮点相关知识的思想和分析能力，希望在后续的学习中有所进步，多多提高自己在这方面的能力。增强自己操作能力和知识水平