CSS 知识汇总

1.浏览器渲染过程

以下为主要的六个步骤，实际上浏览器做的事情还要复杂一些。

构建DOM树，处理HTML标签并构造DOM树。
构建CSSOM树，处理CSS并构建CSSOM树，和DOM树类似。
Render树，通过DOM树和CSSOM树合成Render树。
Layout,确定元素的文档流，盒模型，确定大小和位置。
Paint，绘制元素的可视部分，确定边框，颜色，阴影等。
Compositing，根据层叠关系最终合成画面。

2.CSS 动画的两种做法

1. transition 过渡

通常可以给元素在不同的状态转变时提供过渡的效果，使得动画不会太突兀,变得顺滑。需要触发相应事件，鼠标悬浮，鼠标点击，例如搭配伪类选择器：hover提供一个过渡的变化。
语法：transition：属性名完成时间过渡方式延迟时间

div
{
    width:100px;
    transition: width 2s linear 3s;

}
div:hover {width:500px;}

2. animation

配合关键帧@keyframe，相对于transition更好的来实现多次的动画效果

@keyframe两种语法：

1.from to写法

@keyframes xxx {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

2.百分数写法

@keyframes xxx {
  0% {transform: translateX(0%);}
  30% {transform: translateX(30%); }
  68% { transform: translateX(68%); }
  100% { transform: translateX(100%); }
}

animation的语法

animation:时长|过渡方式|延迟时间|次数|方向|填充模式|是否暂停|动画名；
animation：1s linear 3s infinite alternate forwards running xxx；

3.css学习心得

css每个知识点都不难，看上文档写个简单demo很快学会，但是当各种属性配合一起，往往会产生各种意外的效果，css的难以融会贯通在于它的非正交性，很多时候并没有什么逻辑和道理可言。很多时候需要自己多学多用多去感受，然后总结记住效果。