文件流： 就是規則，準確點說就是決定了元素的排列和定位的一套規則。

流體佈局：利用文件流本身的特性，實現的各類佈局效果。文件流本身具有自適應性，所以流體佈局也具有自適應性。

css3

• src-set：根據螢幕密度現實對應尺寸的圖片

  • 裝置畫素比：裝置物理畫素/裝置獨立畫素（window.devicePixelRatio）
  • 裝置獨立畫素：一種由程式使用並控制的虛擬畫素，包含css畫素
  • 裝置物理畫素：裝置硬體本身決定的畫素（有一堆單元格畫素點組成）
  • 當我們進行瀏覽器縮放時，其實就是在改變瀏覽器的裝置畫素比。
  • 相容性：https://caniuse.com/#search=srcset

• object-fit

  • none: 預設

  • fill: 強制適應寬高，不保持比例

  • contain: 保持比例，並完整放下圖片

  • cover: 保持比例，鋪滿。

  • scale-down: none和contain中表現小的那個

• Grid

  • Grid 佈局由兩個核心組成部分是 wrapper（父元素|網格容器）和 items（子元素|網格項）

  • 網格容器

    • display: grid、inline-grid、subgrid
      • grid：塊級網格
      • inline-grid：內聯網格
      • subgrid：如果你的網格容器本身是另一個網格的網格項（即巢狀網格），你可以使用這個屬性來表示。這個屬性指明這個容器內部的網格項的行列尺寸直接繼承其父級的網格容器屬性。
    • grid-template-row：行劃分規則 => 單位：px 、%、 fr
    • grid-template-columns：列劃分規則 => 單位：px 、%、 fr
      • repeat()
      • fr: 等分剩餘可用空間
      • 指定網格名稱：[first] 40px [line2] 50px [line3] auto
    • grid-row-gap: 行間距 => 單位：px
    • grid-column-gap：列間距 => 單位：px
    • grid-gap: 10px 10px || 10px =>簡寫(行、列)
    • justify-items：單元格中的內容水平對齊方式
      • start：將內容對齊到網格區域(grid area)的左側
      • end：將內容對齊到網格區域的右側
      • center：將內容對齊到網格區域的中間（水平居中）
      • stretch：填滿網格區域寬度（預設值）
    • align-items: 單元格中的內容垂直對齊方式 => 同上
    • justify-content && align-content :網格合計大小 相對於容器大小定位
      • start：將網格對齊到 網格容器(grid container) 的左邊
      • end：將網格對齊到 網格容器 的右邊
      • center：將網格對齊到 網格容器 的中間（水平居中）
      • stretch：調整 網格項(grid items) 的寬度，允許該網格填充滿整個 網格容器 的寬度
      • space-around：在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間
      • space-between：在每個網格項之間放置一個均勻的空間，左右兩端沒有空間
      • space-evenly：在每個柵格專案之間放置一個均勻的空間，左右兩端放置一個均勻的空間
    • grid-auto-columns && grid-auto-rows：在你明確定位的行或列，超出定義的網格範圍時，會建立寬度自適應的隱式網格項
      • 用來指定隱式網格項大小，可使用：px % fr
    • grid-auto-flow: 自動放置演算法
      • row：告訴自動佈局演算法依次填充每行，根據需要新增新行
      • column：告訴自動佈局演算法依次填入每列，根據需要新增新列
      • dense：告訴自動佈局演算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺
    • grid-template-areas
      • grid-area-name：由網格項的grid-area指定的網格區域名稱
      • .（點號） ：代表一個空的網格單元
      • none：不定義網格區域

  • 網格項

    • grid-column-start: 1 =>起始位置（網格線-列）
    • grid-column-end: 4 =>結束位置（網格線-列）
    • grid-column：1/4 =>簡寫
    • grid-row-start && grid-row-end && grid-row 同上
    • grid-area: 指定網格區域名稱
    • justify-self：沿著 行軸線(row axis) 對齊
      • start：將內容對齊到網格區域的左側
      • end：將內容對齊到網格區域的右側
      • center：將內容對齊到網格區域的中間（水平居中）
      • stretch：填充整個網格區域的寬度（這是預設值）
    • align-self: 沿著列軸線(column axis)對齊 屬性值同上