CSS 知识总结

1. 浏览器渲染原理

1.解析HTML标签，构建HTML树（DOM）。

2.解析CSS标签，构建CSS树（CSSOM）。

3.把DOM和CSSOM组合成一颗渲染树（render tree）。

4.在渲染树的基础上进行Layout布局，计算每个节点的几何结构（文档流、盒模型、计算大小和位置）。

5.将各个节点绘制到屏幕上：Paint绘制（把边框颜色、文字颜色、阴影等画出来），Compose合成（根据层叠关系展示画面）。

2. CSS 动画的两种做法（transition 和 animation）

transition（过渡）

简写语法：transition:property duration timing-function delay;

transition 其实是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写形式：

• transition-property:指定哪个或哪些 CSS 属性用于过渡。
• transition-duration：指定过渡的时长。
• transition-timing-function：指定一个函数，表示变化的速度曲线（各种函数曲线，背后都是数学）。
• transition-delay:指定延迟，即多久开始发生变化。 一个简单的demo：

简写语法animation: name duration timing-function delay iteration-count direction fill-mode play-state

• name :指定的@keyframe名称
• duration: 指定一段动画的时常，比如1s或者1000ms
• timing-function：指定动画的速度曲线，与transition取值一样，如linear
• delay：指定延迟时间。
• iteration-count:指定动画的次数,可以取值infinite无限
• direction：指定动画是否可以反向播放，取值reverse|alternate|alternate-reverse
• fill-mode：指定动画在播放之前或之后，其动画效果是否可见。
• play-state：指定是否暂停动画

我们在使用anmiation属性时，需要配合使用@keyframes来控制动画中的中间步骤。
使用@keyframes建立两个或两个以上关键帧，每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
@keyframes使用百分比来指定动画发生的时间点，0%表示动画的第一时刻，100%表示动画的最终时刻。因为这2个时间点十分重要，所以还有特殊的别名：from和to。 比如：

一个简单的demo：

.box{
 width: 100px;
 height: 100px;
 background-color: red; 
 position: relative;
 animation: move 2s alternate infinite
}
@keyframes move {
  from {
    left:0px;
  }
  to {
    left:200px;
  }
}
复制代码

参考

3. 其他

transform

    width: 100px;
    height: 100px;
    border: 1px solid red;
    /* position: absolute; */
    /* left: 50%;
    top: 50%; */
    /* transform: translateX(-50%) translateY(-50%); */
    transition: all 1s;
    margin: 50px;
}
/* #demo:hover{ */
    /* 移动 */
    /* transform: translateZ(50px);
} */

.wrapper{
    /* #translateZ的视点 */
    /* perspective: 1000px; */
    border: 1PX solid black;
    /* position: relative; */
    height: 500px;
}

/* #demo:hover{
    #不常用
    transform: scale(1.5);
} */

#demo:hover{
    /* 旋转45度 */
    transform: rotateX(45deg);
}