CSS 知识总结1. 在哪里搜索练习素:PSD web 2. margin合并哪些情况会合并：父子margin合并、兄

1. 在哪里搜索练习素:PSD web
2. margin合并

哪些情况会合并：父子margin合并、兄弟margin合并
如何阻止合并：padding、border挡住；overflow：hidden；display：翻了下 3. 基本单位：
长度：px、em、百分数、整数、rem、vm和vh
颜色：十六进制（eg. #FF6600）、RBGA颜色(eg. rgb(0,0,0)或rgba（0,0,0,1）)、hsl颜色（eg. hsl(360,100%，100%)） 4. css布局
float布局

flex布局
(1) 记住这些代码：

display: flex;
flex-direction: row/column;
flex-wrap: wrap;
justify-content: center/space-between;
align-items: center;

(2) 注意事项：
除非特殊说明，否则不要把width和height写死，使用min-width、max—width、min-height、max-height；
flex可以基本满足需求；
flex和margin-xxx：auto 配合有意外的效果

containerP{
    grid-template-column: 40px 50px auto 50px 40px;
    grid-template-row: 25% 100px auto;
}

grid-template-area很好用，尤其适合不规则布局。

5. CSS定位

div.calssList.add('red')
div.remove()

CSS渲染过程依次包含布局、绘制、合成，其中布局和绘制可省略
CSS动画优化：
JS优化：使用requestAnimationFrame代替setTimeout或setInterval
CSS和功能优化：使用will-change或translate
transform：
四个常用功能：位移：translate、缩放：scale、旋转：rotate、倾斜：skew
经验：一般都需要配合transition过度；inline元素不支持transform，需要先变成block。
绝对定位元素居中常用代码：

left：50%；
top： 50%；
transform：translate（-50%，-50%）

@keyframes slidein{
    from{
        transform:translateX(0%);
    }
    to{
        transform: translateX(100%)
    }
}

（2）百分数，例如：

@keyframes identifier{
    0% { top：0; left: 0;}
    30% { top: 50px;}
    68%, 72% { left:50px;}
    100% { top:100px;left:100%;}
}