CSS基础

    CSS是谁发明的：李爵士的挪威同事赖先生首先提出CSS
    CSS牛逼之处：层叠样式表

    语法一：样式语法
    选择器{
    属性名：属性值；
    /注释/
    }

    语法二：at语法
    @charset “UTF-8”；
    @import url（2.css）；
    @media （min-width:100px）and（max-width:200px）{语法一}

    如何调试CSS
    使用W3C验证器（在线/命令行工具）
    使用VSCode看颜色
    使用WebStorm看颜色
    使用开发者工具看警告

    网站推荐
    google搜索关键词时加MDN
    CSS tricks（英文）
    张鑫旭的博客

    两种盒模型（重点）
    CSS知识总结 - 图1

    content-box内容盒-内容就是盒子的边界
    border-box边框盒-边框才是盒子的边界

    CSS布局
    float、flex 、grid
    CSS知识总结 - 图2


    CSS的定位（布局是屏幕平面上的，定位是垂直于屏幕的）
    position
    static默认值，待在文档流里
    relative相对定位，升起来，但不脱离文档流（占的位置不变，显示的地方会有一个偏移—实际位置不变，但显示出来会变）
    absolute绝对位移，定位基准是祖先里的非static
    flixed固定位置，定位基准是viewport（有诈）
    sticky粘滞定位

    CSS动画
    浏览器渲染原理
    CSSOM 树和 DOM 树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
    三种不同渲染方式
    CSS知识总结 - 图3

    transform四个常用功能
    位移translate
    缩放scale
    旋转rotate
    倾斜skew

    除了用transform还可以用animation

    animation**
    animation配合@keyframes声明关键帧，也可以实现transform 的功能