css的布局和定位、动画，js的学习

css的布局和定位

1.所有子元素默认的初始位置在左上顶点
2.通过left和top控制x和y轴距离

布局和定位

子元素绝对位置 父元素相对位置

父元素的定位方式为相对定位（position: relative）时，它会成为子元素绝对定位时的参考系。子元素的绝对定位是相对于父元素的位置进行偏移的，因此父元素的位置对于子元素的位置具有重要的影响。如果父元素没有设置相对定位，则子元素的绝对定位将相对于文档根元素进行偏移，这可能会导致位置偏移失误。因此，为了实现准确的元素定位，通常需要在父元素上设置相对定位。

如下css代码：

.fu{
       width: 300px;
       height: 300px;
       position: relative;
   }
   .z1,.z2,.z3,.z4,.z5,.z6{
       position: absolute;
   }

例如z1有如下属性

.z1{
                width: 300px;
                height: 300px;
                left: 200px;
                top: 200px;
                background-color: black;
                border-radius: 50%;
            }

其余z2到z6也有类似的属性，经过特定参数的设置和元素层级的摆放可以摆出黑桃A图案：

css动画

使用css动画时一般需要使用@keyframes定义关键帧动画，根据不同百分比的时间点设置元素的位置和属性，从而实现动画效果。

@keyframes move1{
      form{ 
      }to{ 
      }
}

这里的form代表起始位置，to代表结束位置，除了from{}to{}形式还可以使用0%{}-100%{}，这样也表示从起点到终点，还可以在中间添加其他效果，如0%{}-30%{}-60%{}-80%{}-100%{}。

在下面例子中，定义了一个名为move1的关键帧动画，元素在动画过程中沿着一个矩形路径移动，从左上角出发，先往右移动到 500px，再向下移动到 500px，最后往左移动回到原点。

@keyframes move1{
            0%{
                top: 0;
                left: 0;
            }33%{
                top: 0px;
                left: 500px;
            }
            66%{
                top: 500px;
                left: 500px;
            }
            100%{
                top: 500px;
                left: 0px;
            }

要将某个元素应用上面的动画可以在其css样式代码中可以加入如下代码：

animation: move1 1s linear 0.1s 3 alternate forwards;

其中，move1是动画名称，1s是动画持续时间，linear代表动画速度为线性变化，0.1s为初始延迟，3为重复次数，alternate代表方向为交替，forwards代表动画结束后停在最终状态。

旋转太极图
先使用css将几个基本图形组合成太极图，再使用@keyframes定义动画关键帧，这里使用的是transform的rotate()，它可以将元素绕着中心点旋转，括号里代表旋转的角度。

@keyframes circles{
            from{
                transform: rotate(360deg)
            }to{
                transform: rotate(0deg);
            }
        }

代码中由360度到0度代表逆时针旋转。

JS的学习

在JavaScript中，

• number类型的变量，在需要转换成boolean类型时，如果值为0，则转换成false，否则为true
• string类型的变量，在需要转换成boolean类型 时，如果值为’'空字符串，则转换成false，否则为true
• null和undefined都会转换成false。

js的数组可以存放各种类型的元素

let arr1=[1,2.3,'a',true,null,undefined];

dom

dom是指文档对象模型，它是一个编程接口，允许我们从文档中创建、更改或删除元素。我们还可以向这些元素添加事件，使我们的页面更加动态。
例如向按钮添加点击事件：

 <button onclick="changeText()">替换按钮</button>

其中onclick为点击事件属性，属性值为函数名，这里表示当按钮被点击时运行changeText()函数。

要对某个元素进行修改首先要获取它的id，可以使用document.getElementById(‘ul1’)，这里获取的是id为ul1的元素，当按钮被点击时运行点击事件触发的函数，在此函数中使用了模板字符串来将指定数组中的内容嵌入标签中，最后将组合好的字符串设置于ul1元素。

// 1.获取ul
let ul1=document.getElementById('ul1')
function changeText(){
	// 2.替换
    let s=''
    arr.forEach((e)=>{
        s+=`<li>${e.id}-${e.name}-${e.age}</li>`
    })
    ul1.innerHTML=s
}

强盛集团案例

在此案例中应用了按钮的美化，表格的显示，核心是使用了dom来对表格的数据进行操作。