工作日志

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

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

心得

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