css

• padding 百分比相对于宽度
• position

top： 50% 相对于高度
left: 50% 相对于宽度的50%

• 实现进度条

 <div class="box4"><div/>
.box4{
    border: 1px solid red;
    background-image: linear-gradient(green,green);
    background-repeat: no-repeat;
    animation: pro 15s linear infinite alternate;
    animation-delay: 2s;
    background-size: 0

}
@keyframes pro{
    50% {
        background-size: 100%;
        background-image: linear-gradient(red,red)
    }
    100% {
        background-size: 100%
    }
}

• rotate(5turn) ,turn表示一圈

transform: rotate(10turn)

• 无限匀速循环

.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
    animation: ro 1s infinite linear; // linear 匀速
}
@keyframes ro {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

• tansition循环

.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s; // hover过渡需要的事件
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
}
.box2:hover{
    transform: rotate(10turn) // 5s转10圈
}

• 对角线，循环运动

.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
    position: absolute;
    animation: movex 2s linear infinite alternate , movey 2s linear infinite alternate
}
@keyframes ro {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes movex {
    0% {
        left : 0%
    }
    100% {
        left: 500px
    }
}
@keyframes movey {
    0% {
        top : 0%
    }
    100% {
        top: calc(100% - 10vw)
    }
}

• display margin:auto

<div class="wrap">
        <div class="box">box</div>
        <div class="box">box</div>
<div />
.wrap { display: flex }
.box { margin: auto } // 这样box默认上下居中

• position left right

position: absolute
left: 30px;
right: 30px; //目标的宽短就是width - 60

• posotion 与z-index

postion非static下的z-index才有效
父A > B
子 A <  B
子A还是会压住B，因为拼爹

• 实现三角形

.box:nth-child(2){
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: red transparent transparent transparent
}
    </style>
    <div class="wrap">
        <div class="box">box</div>
        <div class="box">box</div>
    </div>

• 隐藏文字

text-index: -100px

• 背景图跟随文字: background-attachment: local;

.box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-right: 150px;
    background-image: url(pic.jpeg);
    overflow: auto;
    color: red;
    background-attachment: local;
}