CSS知识小总结

浏览器渲染原理

  1. 根据html构建html树(DOM)
    html树就像一颗倒立的树,不断往下分叉。每个叉是一个html标签。
  2. 根据css构建css树(CSSOM)
    MDN上说:css树是一组允许用JavaScript操纵CSS的API。 它是继DOM和HTML API之后,又一个操纵CSS的接口,从而能够动态地读取和修改CSS样式。
  3. 将两棵树合并成一颗渲染树(render tree)
    渲染树是dom与cssom连接在一起形成的。渲染树用来描述所有可见的DOM内容,并且将CSSOM样式信息附加到节点上。
  4. Layout 布局
    会计算这几项:文档流、盒模型、大小和位置。
  5. Paint绘制
    把边框颜色、文字颜色、阴影等画出来
  6. Compose合成
    根据层叠关系展示画面

CSS 动画的两种做法

  1. transition
    给一个元素的css添加一个class属性xxx,xxx里有个属性会使元素变化,也许是大小、颜色或位置。给这个元素本身就写一个transition属性值。当xxx添加到元素或者从元素移除时,就会出现动画效果。
  2. animation
    写一个@keyframes xxx,里面用transform设置动画效果。在某个元素的css样式里写上animation属性和值,使用xxx就可以应用这个动画了。

重点

  1. 要习惯查mdn。
  2. css实现就好,不要扣太细。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值