画布 1
CSS
  使用方式
    style 属性， link，style
  选择器
    基本选择器
      id, class, 元素, 属性
    伪类选择器
      实际 DOM 中存在，但是通过一些行为特征匹配到，如 :link, :hover, :focus
    伪元素选择器
      实际 DOM 中不存在的元素，比如 ::before, ::after, ::first-letter, ::first-line
  属性样式
    单位
      px, em, rem, %, cm, mm, ...
    text-xxx, font-xxx, background-xxx, xxx-shadow,
    @font-face
      eot, ttf, woff, svg
      font-family
  层叠算法
    style 属性 > link 和 style
    id 选择器 > class 选择器，伪类选择器， 属性选择器 > 元素选择器，伪元素选择器
  盒模型
    content, padding, border, margin
    box-sizing
      content-box, border-box
  居中实现
    文本居中
      text-align: center & line-height = height
    flex
      justify-content: center; & align-items: center;
      子元素中： margin: auto
    absolution + translate
      父: position: relative
      子： position: absolution & top: 50%; left: 50%; & transform: (-50%, -50%)
  布局排版
    文档流
      从上到下，从左到右
      一行只能一个块级元素，无论是否设置宽高
      行内元素没有宽高，即使设置了也不生效
      行内块元素，一行内可以多个，也可以设置宽高
    position
      relative 相对定位
        参考原位置进行平移，不脱离文档流
      absolute 绝对定位
        脱离文档流，参考最近一个设置 position 的父元素
      fixed 固定定位
        脱离文档流，参考屏幕页面
    float
      会浮动在后面元素的文本内容周围
        消除浮动
          隔墙法
          clear: both
    flex
      flex-direction, flex-wrap, flex-flow, justify-content(主), align-items, align-content