20210524—王博

工作日志

一.知识总结

1.transform

用法：

transform:none 定义不进行转换。

translate(x,y) :定义 2D 转换。

translate3d(x,y,z) :定义 3D 转换。

translateX(x) :定义转换，用 于X 轴的值。

translateY(y) :定义转换，用于 Y 轴的值。

translateZ(z) :定义转换，用 于Z 轴的值。

2.动画

自定义动画:

@keyframes animationName{
    from {}
    to{}
}

animation-iteration-count：定义动画的播放次数。infinite 无限次

3.布局（排版）

正常布局流

浮动：Float属性（浮动内容需要遵循盒子模式，如：外边距和边界）

多列浮动

清除浮动：

footer {

​ clear: both;

}

clear 可以取三个值：left ：停止任何活动的左浮动

right ：停止任何活动的右浮动

both ：停止任何活动的左右浮动

注意：如果有浮动，一定要定义一个父容器，而且一定要定义父容器宽和高。

4.定位

静态定位

相对定位：给元素加上 position:relative; 并不会改变元素的位置，需要使用 top ， bottom ， left 和

right 属性。（相对于其正常位置来定位）

绝对定位：position:absolute;

固定定位

粘性定位：position: sticky

二心得体会

今天学习的内容，老师讲的韩浩，但相对于我来说，理解起来挺有难度的，有些东西嵌套的比较多，搞不清楚使用的位置和应该怎样用，比较混乱和复杂，有时要练习一些东西的时候不知道那个位置里要用哪些元素。