CSS知识总结

70 阅读1分钟

CSS知识总结

浏览器渲染原理

  1. 步骤
  • 根据HTML构建HTML树(DOM)
  • 根据CSS构建CSS树(CSSDOW)
  • 将两棵树合并成一颗渲染树(Render Tree)
  • Layout布局(文档流、盒模型、计算大小和位置)
  • Paint绘制(把边框颜色、文字颜色、阴影等画出来)
  • Compose合成(根据层叠关系展示画面)
  1. DOM,CSSOM,Render Tree

tree


Transition和Animation(CSS动画)

  1. 语法:
  • transition: 属性名 时长 过渡方式 延迟

例如: transition: all 2s ease 2s;

其中过渡方式有: linear/ease/ease-in/ease-out/ease-in-out

#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  transition: all 1s; 
}
#heart:hover{
  transform: scale(1.5); 
}

代码1

  • animation:时长 过渡方式 延迟 次数 方向 填充模式 是否暂停 动画名

例如: animation: .5s heart infinite alternate-reverse;

#heart{
  display: inline-block;
  margin: 100px;
  position: relative;
  animation: .5s heart infinite alternate-reverse;
}
@keyframes heart {
  0%{
    transform: scale(1);
  }
  100%{
    transform: scale(1.2);
  }
}

代码2

资料来源:饥人谷