[前端与理解CSS | 青训营笔记]

43 阅读1分钟

课程概述

  • 为什么学习CSS
    • 拥有更丰富的交互行为与效果
  • 发展史
    • image.png
    • CSS也是一步步发展壮大过来,能被广泛使用也是由原因的hh

基础知识

  • 层叠、优先级
    • image.png
    • 层叠三大规则(优先度逐级递减):
      • 样式表来源
      • 选择器优先级
        • image.png
      • 源码位置
  • 继承
    • image.png
    • CSS的值和单位
    • 盒模型
      • 展示方式image.png
      • 这个好酷啊,想学的,可以按照自己的想法自定义

布局

  • 概述
    • image.png
    • 常规流布局
  • 内联级格式化上下文
    • 使用弹性盒子布局的示例image.png这个图画好生动
  • 网格布局image.png
    • Hrid和Flex布局的使用策略
    • 定位Position
    • 示例

层叠上下文image.png

多维度,有点意思,空间立体感

  • 细节 image.png

变形、过渡、动画

  • 来到最喜欢的3Dimage.png
  • transition过渡
  • animation动画
    • 关键帧之间的交互
  • 型嫩相关
    • image.png

媒体查询的使用

  • 媒体查询允许某些样式只在页面满足特定条件时才生效
    • 小tips码起来
    • image.png
  • CSS像素
    • image.png这个非常生动,结合手机的例子进行讲解

个人理解

这节课有点抽象啦,不能很好的理解,但是我知道CSS的强大之处,也是学习前端必须学习的一项工具,今天先在脑海里面形成一个大概的认知,下次再学就不难啦, 总有一天我会熟练掌握的!