1. 文字
    1. 顏色
      1. color
        1. rgba
        2. hsla
        3. 16進位 #_ _ _ _ _ _ _ _
    2. 大小 可繼承
      1. font-size
    3. 粗細
      1. font-weight
    4. 字型
      1. font-family
        1. 關鍵字
        2. 數值(100~900)
    5. 斜體、斜角
      1. font-style
    6. 線段裝飾
      1. text-decoration
        1. 線段位置
          1. text-decoration-line
        2. 線段色彩
          1. text-decoration-color
        3. 線段樣式
          1. text-decoration-style
    7. 行高
      1. line-height
        1. 純數字
        2. %
        3. px
    8. 首行縮排
      1. text-indent
        1. em
    9. 水平對齊
      1. text-align 文字所在的空間去做對齊
        1. 左右對齊
          1. justify
        2. 置中
          1. center
    10. 垂直對齊
      1. vertical-align
    11. 字元間距
      1. letter-spacing
    12. 空白字元尺寸
      1. word-spacing
    13. 語言方向
      1. dir
    14. 英文全變大寫
      1. font-variants
        1. small-caps
  2. 段落
  3. 背景
    1. 背景顏色
      1. background-color
    2. 設定背景圖片
      1. background-image
        1. url("檔案名稱")
        2. linear-gradient(角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置)
    3. 背景圖片大小
      1. background-size
        1. 露白 (不變形,不可被裁切)
          1. contain
        2. 不露白 (不變形,但會被裁切)
          1. cover
    4. 讓圖片不變形
      1. object-fit
        1. cover
    5. 背景圖片對齊
      1. background-position
        1. %
        2. 位置x 距離x 位置y 距離y
          1. right 100px bottom 50px
    6. 背景圖片重複
      1. background-repeat
        1. repeat
        2. repeat-x(y)
        3. no-repeat
        4. space
        5. round
    7. 背景圖片位置 (圖片捲動頁面會不會跟著動)
      1. background-attachment
        1. 會跟著移動(預設)
          1. scroll
        2. 不會跟著移動(常用)
          1. fixed
        3. 只有捲動自己頁面時才會跟著移動(少用)
          1. local
  4. 尺寸
    1. 寬 不可繼承
      1. width
    2. 高 不可繼承
      1. height
    3. 佔據空間
      1. 可見尺寸
        1. 內容物
          1. content
        2. 內距
          1. padding
        3. 框線
          1. 有佔據空間 可設定圓角
          2. border
          3. 沒佔據空間 不可設定圓角
          4. outline
      2. 外距
        1. margin
          1. auto
          2. 把剩餘空間分配到指定位置
    4. 寬高顯示方式
      1. box-sizing
  5. 濾鏡
  6. 顯示
    1. flex
      1. flex父層設定 作用在下一個子層
        1. 改變物件顯示方式
          1. display
          2. flex
          3. 裡面資料會有block的特性
        2. 主軸走向
          1. flex-direction
        3. 主軸對齊
          1. justify-content
          2. space-around
          3. 中間空隙變2倍
          4. space-between
          5. 貼齊主軸兩側
          6. space-evenly
          7. 等距
        4. 交叉軸 子層(彈性列)空間對齊
          1. align-items
        5. 交叉軸 父層空間對齊 (需搭配wrap)
          1. align-content
        6. 換列 (往交叉軸方向)
          1. flex-wrap
      2. flex子層設定 作用在自己
        1. 主軸物件排列順序
          1. order
        2. 延伸
          1. flex-grow
        3. 收縮
          1. flex-shrink
        4. 基本值
          1. flex-basis
        5. 單一彈性列空間對齊
          1. align-self
    2. 控制物件(非裡面的內容)排列的方向
      1. direction
        1. ltr
        2. rtl
    3. RWD
      1. 製作不變形的三角形
        1. 製作多邊形
          1. clip-path: polygon()
        2. 不變形
          1. aspect-ratio
    4. transform
      1. 縮放
        1. scale(數字)
          1. scale(2)
      2. 讓物件及主軸方向旋轉
        1. rotate(deg)
      3. 依主軸方向位移
        1. translate(x,y)
      4. 物件距離螢幕多遠
        1. perspective(px)
      5. 以3D視角轉動物件
        1. rotateX()
        2. rotateY()
        3. rotateZ()
    5. 陰影
      1. box-shadow
  7. 動畫
    1. @keyframes + name {劇本} 需搭配animation使用
      1. 名字
        1. animation-name
      2. 持續時間
        1. animation-duration
      3. 延遲多久執行
        1. animation-delay
      4. 加減速
        1. animation-timing-function
      5. 執行幾次
        1. animation-iteration-count
      6. 移動方向
        1. animation-direction
      7. 執行完畢的停留位置
        1. animation-fill-mode
      8. 暫停或點到才播放
        1. animation-play-state
  8. 清單
  9. 邊框
  10. 定位
    1. position
      1. 固定
        1. fixed
      2. 相對
        1. relative
      3. 絕對
        1. absolute
      4. sticky (炫炮)
      5. static (少用)
    2. 調整優先度
      1. z-index