CSS 的历史

  1. CSS ，Cascading Style Sheets，层叠样式表。是由李爵士的同事提出的。
  2. 层叠的意思。
    • 样式层叠：可以同时对同一选择器做样式声明。
    • 选择器层叠：可以用不同的选择器对同一个元素做样式声明。
    • 文件层叠：可以使用多个CSS文件对同一HTML文件做声明。

  3. CSS 版本
    目前运用最广泛的是CSS2.1版本，现在开始已经不是以一整个版本升级了，而是分成各个模块，各个模块自主升级。

    文档流

  4. 英文是Normal Flow，也就普通流，文档流是中文翻译。简单说指的就是元素按照它在HTML中的位置进行排布的过程。

  5. 流动方向。

    • inline： 元素从左到右，到达最右才会换行。
    • block：元素从上到下，每一个都另起一行。
    • inline-block：元素也是从左到右，到达最后换行，但是不会把元素分成两块。

      盒模型

  6. content-box：内容盒。content-box的宽度就是内容的宽度。

  7. border-box：边框盒。border-box的宽度是内容的宽度+padding的宽度+border的宽度。

    CSS 布局

    CSS 目前用的大概是三种布局。

  8. Float 布局。

    • 子元素上加 float:left; 和 width
    • 父元素上加 .clearfix
      .clearfix::after{ content:''; display: block; clear: both; }
  9. Flex 布局
    • 父元素container的样式
      • 让一个元素变成Flex容器
        display: flex | inline-flex;
      • 改变items的流动方向（主轴）
        flex-direction: row | row-reverse | column | column-reverse;
      • 改变折行
        flex-wrap: nowrap | wrap | wrap-reverse;
      • 主轴对齐方式（默认是横轴）
        justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
      • 次轴对齐方式（默认是纵轴）
        align-items: stretch | flex-start | flex-end | center | baseline
      • 多行内容
        align-content: flex-start | flex-end | center | stretch | space-betwteen | space-around
    • 子元素items的属性
      • item 上面加上 order
      • item 上面加上 flex-grow 控制自己长胖
      • item 上面加上 flex-shrink 控制自己变瘦
      • Flex 的属性还有很多，用到的时候可以去查询 MDN。

  10. Grid 布局

    • Grid 也分 container 和 items
    • 成为 container
      display: grid | inline-grid;
    • 行和列
      grid-template-columns: 40px 50px auto 50px 40px; grid-template-raws: 25% 100px auto;
    • Grid 的属性很多，用法也很灵活，详细可以用的时候再查询，先了解一个大概就行。

      CSS 定位

      布局是屏幕平面的，定位是垂直于屏幕的。

  11. div 的分层

    • 最底层：background
    • border
    • 块级子元素
    • 浮动元素
    • 内联子元素

  12. position 属性

    • static：默认值，是指这个元素待在文档流里。
    • relative：相对定位。元素升起来，但是不脱离文档流。意思就是你占的位置是不变的，只是看起来不在原来的位置。
    • absolute：绝对定位。定位基准是最近的那个定位不是static的父元素。
    • fixed：固定定位。定位基准是viewport，但是这个定位有问题，手机上尽量不要使用。
    • sticky：粘滞定位。可以用来做导航，但是兼容性很差，用的少。

      CSS 动画

  13. 动画的原理
    动画就是一幅幅静止的图片以一定的速度连续播放时，肉眼因为有视觉残像就会误以为画面在动。

  14. 浏览器渲染过程
    • 根据 HTML 文件构建一棵 HTML 树。
    • 根据 CSS 文件构建一棵 CSS 树。
    • 然后将两棵树合并成一棵渲染树（render tree）。
    • Layout 布局（文档流、盒模型、计算元素的大小和位置）。
    • Paint 绘制（边框颜色、文字颜色、其他颜色）。
    • Composite 合成
  15. 动画有两种做法
    • 用 transform 过渡
      • 补充中间帧
      • transition：属性名 时长 过渡方式 延迟
      • transition：left 200ms linear
      • 可以用逗号隔开两个不同属性
      • transition：left 200ms，top 400ms
      • 可以用all表示所有属性
      • transition：all 200ms
      • 过渡方式有：linear / ease / ease-in / ease-out / ease-in-out / cubic-bezier / step-star / step-end / steps
    • 用 animation
      • animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 | 填充模式 | 是否暂停 | 动画名
      • 时长: 1s或者1000ms
      • 过渡方式：跟transition取值一样，如linear
      • 次数：3或者2.4或者infinite，infinite可以让它一直动
      • 方向：reverse | alternate | alternate-reverse
      • 填充模式：none | forwards | backwards | both
      • 是否暂停：paused / running
      • 以上属性都是对应的单独属性
    • keyframes 有两种写法
      • 第一种写法是 from to
        @keyframes slidein { from { transform: translateX(0%); } to { transform: translateX(100%); } }
      • 第二种写法是百分数
      • @keyframes identifier { 0% { top: 0; left: 0; } 30% { top: 50px; } 68%, 72% { left: 50px; } 100% { top: 100px; left: 100%; } }

        红心演示案例：https://jsbin.com/luzesebeco/1/edit?html,css,output<br />