CSS3全覽_最新佈局

CSS3全覽_最新佈局

目錄

• CSS3全覽_最新佈局
  • 1. 浮動及其形狀
  • 2. 定位
  • 3. 彈性盒佈局
  • 4. 柵格佈局
  • 5. 表格佈局

作者: https://www.cnblogs.com/xiaxiangx/

---

1. 浮動及其形狀

很長時間, 浮動元素是所有 Web 佈局方案的基礎 ( 很大程度上依賴 clear 屬性 )

1. 浮動
   • 以前只有影像能浮動, 現在任何元素都可以浮動
   • float, 取值 left, right, none, 浮動元素後要注意, 浮動的元素脫離了常規的文件流, 不過對佈局仍有影響. 使用 CSS 浮動元素的獨特之處是, 浮動的元素基本上算是處在單獨的平面上, 浮動元素四周的外邊距不折疊. none 作用是徹底禁止元素浮動
   • 容納塊: 最近的塊級祖輩元素, 浮動後變塊元素
   • 浮動規則如下
     1. 浮動元素的左 (或右) 外邊界不能超過容納塊的左 (或右) 內邊界.
     2. 假如左側有個浮動, 之後的浮動只能在後面, 除非可以另出一層, 右側類似
     3. 左右浮動不能重疊
     4. 浮動元素的頂邊不能比父元素的內頂邊高. 如果浮動元素位於兩個摺疊的外邊距之間, 在兩個元素之間放置它的位置時, 將視有個塊級父元素
     5. 浮動元素的頂邊不能比前方任何一個浮動元素或塊級元素的頂邊高
     6. 浮動元素的頂邊不能高於文件原始碼中出現在浮動元素之前的元素生成的框體所在的行框的頂邊
     7. 空間不夠時, 浮動元素會被擠在新的一行中
     8. 浮動元素必須放在儘可能高的位置上
     9. 左浮動元素必須儘量向左移動
   • 具體行為, 負外邊距對浮動的影響, 導致浮動元素超出了所在的父元素, 原因是子元素也超出了所在的父元素, 當浮動比父元素寬時, 浮動元素會溢位
   • 浮動元素與內容重疊, 行內框與浮動元素重疊時, 其邊框, 背景和內容都在浮動元素 "之上" 渲染. 塊級框與浮動元素重疊時, 其邊框和背景在浮動元素 "背後" 渲染, 而內容在浮動元素 "之上" 渲染
2. 清除浮動
   • clear 取值, left, right, both, none, 清除浮動後, 浮動元素就不能與清除浮動的內容重疊, 浮動框的邊界由浮動元素外邊距的邊界劃定
3. 浮動形狀
   • 項規定浮動元素周圍內容按什麼形狀流動, 首先定義一個形狀. shape-outside,
     • 使用影像形狀時, 內容會流入與之 "直接接觸" 那一側的透明部分
     • 其他形狀, inset(), circle(), ellipse(), polygon(), margin-box, border-box, padding-box, content-box, 預設使用外邊距框
     • shape-outside: inset(10px 0.5em 15px 0.5em);
     • 浮動框會裁剪超出的浮動形狀
     • 使用百分數設定圓形浮動形狀的半徑時, 半徑相對一個引用框計算, 根號下寬度平方加高度平方, 除以根號2, 橢圓提供兩個半徑, circle(farthest-side at top left), ellipse( 20px 30px at top left)
     • 多邊形, polygon(25px 0, 50px 25px, 25px 50px, 0, 25px), 超出的形狀會被裁剪. 多邊形可以調整填充規則, nonzero, evenodd
   • 使用透明影像定義形狀, shape-image-threshold, 指定透明度為多少時允許內容流入.
   • 為形狀新增外邊距, shape-margin 為形狀新增 "外邊距" , 它可能被margin裁剪掉, 因此shape-margin 要小於等於margin

---

2. 定位

相對元素框的常規位置定義元素的具體位置

1. 基本概念

   • 定位 position, 取值, static, relative, absolute, fixed, sticky
   • 容納塊, 包含另一個元素的框體. position 屬性的值是 relative 或 static, 其容納塊由最近的塊級, 單元格或行內塊祖輩元素的框體的內容邊界劃定, 如果 position 屬性的值是 absolute, 其容納塊是 position 屬性的值不是 static 的最近的祖輩元素, 具體規則如下
     • 如果祖輩元素是塊級元素, 容納塊是那個元素的內邊距邊界, 即由邊框限定的區域
     • 如果祖輩元素是行內元素, 容納塊是祖輩元素的內容邊界. 在由左至右書寫的語言中, 容納塊的頂邊和左邊是祖輩元素中第一個框體的內容邊界的頂邊和左邊, 底邊和右邊是最後一個框體的內容邊界的底邊和右邊. 在從右向左書寫的語言中, 容納塊的右邊界是第一個框體內容區的右邊界, 左邊界是最後一個框體內容區的左邊界, 頂邊和底邊和前述情況一樣
     • 如果沒有祖輩元素, 元素的容納塊是初始容納塊

2. 偏移屬性

   • 四種, top, right, bottom, left, 偏移屬性定義的是距容納塊相應邊的偏移距離
   • 定義了上下左右四個定位, 寬度和高度自動推斷出來

3. 寬度和高度

   • 預設是 auto, width, height,
   • 限制寬度和高度, min-width 和 min-height, max-width, max-height

4. 內容溢位和裁剪

   • 溢位, 用 overflow, 取值, visible, hidden, scroll, auto, scroll:裁剪了, 有滾動條

5. 元素的可見性

   • visibility, 取值, visible, hidden, collapse, hidden: 和vue的show類似, collapse在渲染表格時使用

6. 絕對定位

   • 絕對定位的容納塊, 絕對定位的元素完全從文件流中移除, 其位置相對容納塊確定

   • 絕對定位元素的位置和尺寸, 定義好四個位置, 寬度和高度自動決定

   • 自動確定邊界的位置, 絕對定位元素的邊界與 "靜態位置" 的邊界對齊

   • 非置換元素的位置和尺寸 , 絕對定位元素有 "自動縮放" 功能, 把外邊距設為auto, 橫向居中顯示絕對定位元素, 過約束時忽略 right 屬性的值, 過約束時忽略 margin-right

   • 外邊距設為 auto, 縱向居中顯示絕對定位元素

   • 置換元素的位置和尺寸

     1. 如果把 width 設為auto, width 的具體值由元素內容的內在寬度確定
     2. 在從左至右書寫的語言中, 如果 left 的值是auto, auto 將替換為靜態位置, 從右向左彙總, right 的auto值將被替換為靜態位置
     3. 如果 left 或 right 的值仍是 auto, 把 margin-left 或 margin-right 的auto值替換為 0
     4. 如果此時 margin-left 和 margin-right 的值仍為 auto, 把二者設為相等的值, 即讓元素居中顯示在容納塊中
     5. 最後如果還有 一個屬性的值為 auto, 修改為滿足等式所需的值, 如果導致過約束, 使用者代理將忽略 right

   • 縱軸佈局類似

     1. 如果把 height 設為auto, height 的具體值由元素內容的內在高度決定
     2. 如果 top 的值是 auto, 替換為置換元素的靜態位置
     3. 如果 bottom 的值是auto, 把值為 auto 的margin-top 或 margin-bottom 替換為0.
     4. 如果此時margin-top 和 margin-bottom 的值仍為 auto, 把二者設成相等的值, 即讓元素居中顯示在容納塊中
     5. 最後, 如果還有一個屬性的值為auto, 修改為滿足等式所需的值

     與非置換元素一樣, 如果過約束了, 使用者代理將忽略 bottom 的值.

   • Z軸上的位置, z-index, z-index的值越大, 元素離讀者的距離越近. 因此, 值大的元素可能會遮蓋其他元素. 使用 z-index 設定堆疊次序時, 子元素不能在父元素背後繪製. z-index: auto 可以視作 z-index: 0

7. 固定定位

   • 固定定位實現框架式介面, 可以把頁頭固定在檢視頂部, 把側邊欄固定在檢視一側

8. 相對定位

   • 相對定位使用偏移屬性移動元素, 相對定位中, 元素從常規的位置移開了, 但是其佔據的空間並沒有消失.
   • 相對定位的元素還可能與其他元素重疊. 過約束, 後一個設為前一個值的相反數

9. 粘滯定位

   • position: sticky, 偏移屬性( top, left等 ) 用於定義相對容納塊的粘滯定位矩形.
   • 帶 auto 的偏移屬性無效, 某個位置觸發了多個粘滯定位, 那麼這些元素會堆在一起

---

3. 彈性盒佈局

彈性盒佈局把已完艱鉅的佈局任務變得極為簡單

1. 彈性盒基礎

   • 在元素上宣告 display: flex 或 display: inline-flex 便啟用彈性盒佈局, 這個元素也成為彈性佈局. 彈性容器的子元素稱為彈性元素. 把一個元素設為彈性容器後, 只有直接子元素使用彈性盒佈局, 其他後代元素不受影響. 主軸是橫向, 也可以是縱向. 空白的處理方式有很多.

2. 彈性容器

   • flex-direction 屬性控制排布彈性元素的主軸. 取值, row, row-reverse, column, column-reverse. 不要使用 flex-direction 修改從右至左書寫語言的佈局. 正確的做法是使用 dir 屬性, 或者使用, CSS writing-mode屬性

   • 其他書寫方向, 彈性盒能自動轉換彈性方向, 書寫模式由 writing-mode, direction, text-orientation屬性設定, 也可以使用 HTML 的 dir 屬性設定

   • 換行, 在容器中設定 flew-wrap 屬性, 允許彈性元素換行, 變成多行或多列, 而不讓彈性元素從容器中溢位, 或者縮減尺寸, 擠在同一行, 取值, nowrap, 擠在一行, wrap, 換行, wrap-reverse

   • 定義彈性流, flex-flow, 定義主軸和副軸的方向, 以及是否允許彈性元素換行. 它是 flew-flow 屬性是 flex-direction 和 flew-wrap 兩個屬性的簡寫形式. 使用 flex-flow: wrap column-reverse;

   • 主軸: 內容沿此軸流動. 在彈性盒中, 指彈性元素流動的方向

     主軸尺寸: 主軸方向上內容的總長度

     主軸起邊: 主軸上內容開始流動的那一端

     主軸終邊: 主軸上內容流向的那一端, 與主軸起邊相對

     垂軸: 理解為副軸

     垂軸尺寸: 副軸總長度

     垂軸起邊: 垂軸上內容開始流動的那一端

     垂軸終邊: 垂軸上內容流向的那一端, 與垂軸起邊相對

   • flex-wrap 續談

3. 佈置彈性元素

4. 彈性容器

   • 如果彈性元素不能填滿整個彈性容器, 彈性元素將統一向主軸起邊靠緊.

5. 調整內容

   • justify-content, 取值, flex-start, flex-end, center, space-between, space-around, space-evenly, (between, 兩端有, 中間平分)
   • 單行溢位的影響, between只包括頭, around和evenl包括中間

6. 對齊元素

   • justify-content 定義彈性元素在彈性容器主軸方向上的對齊方式, 而 align-items 屬性把所有彈性元素都向垂軸的起邊, 終邊或中線對齊
   • align-items, 取值, flex-start, flex-end, center, baseline, stretch(預設),
   • 基線對齊, baseline, 一行中的彈性元素向第一條基線對齊. 看誰的第一條基線最下
   • 如果想改變某個或某些彈性元素的對齊方式, 不是全部修改, 為相應的元素設定align-self屬性, 這個屬性的取值與 align-items 一樣

7. align-self屬性

   • align-self, 這個屬性在單個彈性元素上覆蓋 align-items , 取值和 align-items 一樣

8. 對齊方式

   • align-content, 取值, flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, 作用於justify-content

9. 彈性元素

   • 為有子節點的元素宣告 display: flex 或 display: inline-flex 即可建立彈性容器, 子節點是彈性元素, 父節點是彈性容器
   • 彈性元素的特性, 彈性元素的外邊距不折疊, 應用到彈性元素的 float 和 clear 將被忽略( 然而, float屬性對框體的生成仍有影響, 因為display屬性的計算值受它影響 ), 有個匿名彈性元素放沒有標籤的文字. vertical-align 對彈性元素沒有影響, 只用於設定彈性元素中文字的對齊方式.
   • 絕對定位, float 不會浮動彈性元素, 但是 position: absolute 不一樣, 如果絕對定位彈性容器的子元素,與絕對定位普通元素一樣, 將從文件流中移除, 不再參與彈性佈局. 但受到justify-content, align-self 值的影響, order 屬性對其無影響
   • 最小寬度 min-width 預設是 auto, 而不是0, 如果將其設定為0, 不換行溢位情況下, 彈性元素會自動壓縮適應

10. 適用於彈性元素的屬性

11. flex屬性

    • flex-grow, flex-shrink, flex-basis 的簡寫, 取值多加個 null
    • 彈性元素所在的框體尺寸由 flex 決定, 而不是 height 或 width, 要素三個, 彈性增長因子, 彈性縮減因子和彈性基準. 彈性基準指明如何應用彈性增長因子和彈性縮減因子.

12. flex-grow屬性

    • 開發人員在flex簡寫中定義 flex-grow 屬性
    • flex-grow屬性定義有多餘的空間時是否允許彈性元素增大, 以及允許增大且有多餘的空間時, 相對其他同輩彈性元素以什麼比例增大, 取值是數字, 負數無效, 依據彈性元素的 增長因子的比例分配空閒空間
    • 使用 flex 分配的全部空間, 單獨使用 flex-grow 只分配剩餘空間

13. flex-shrink屬性

    • 定義空間不足以放下所有彈性元素時, 當前彈性元素相對其他同輩彈性元素將縮小多少. 寬度相同情況下與grow類似, 寬度不同情況下, 有個縮小比例, 縮小比例= 缺少的空間/((寬度1*縮減因子1)+(寬度2*縮減因子2)+...+(寬度n*縮減因子n)), 每個彈性元素縮小的量等於 縮小比例*縮減因子

    • 不同的基準, 如果寬度和彈性基準都是 auto, 縮減因子為零時, 彈性元素中的內容不換行. 縮減因子為任何正式都會導致內容黃

14. flex-basis屬性

    • 定義彈性元素的初始或預設尺寸
    • 自動確定彈性基準, 設為 auto 時, 不管是顯式宣告還是取預設值, flex-basis 等於元素在主軸方向上的尺寸, 就像沒把元素變成彈性元素一樣. 如果 width 或 height 也是auto, 那麼彈性基準回落為 content
    • 預設值, 既沒有宣告 flex-basis , 也沒有宣告flex, 彈性元素的主軸尺寸是未彈性變形時元素的尺寸, 因為預設值是 auto
    • 長度單位, 彈性基準的優先順序比 寬度或高度 高. 最小最大寬高值優先順序更大, 彈性基準為百分數值時, 主軸尺寸相對彈性容器計算. 雖然彈性基準的百分數值相對彈性容器的寬度計算, 但是主軸尺寸受同輩元素的影響
    • 基準為 auto 時, 只有多出的空間按比例分配給允許增大的彈性元素. 基準為0分配全部空間. 如果宣告瞭flex屬性, 但是沒有設定彈性基準要素, 預設為0

15. flex 簡寫屬性

    • initial, 根據width 或 height 屬性確定尺寸, 允許縮小. 不能增大
    • auto, 可以根據 width 或 height 屬性確定彈性元素的尺寸, 元素是完全彈性的, 既可以縮小也可以增大.
    • none, 沒有彈性. 數值
    • 數字值, 只有一個是增大因子

16. order屬性

    • order 屬性用於修改單個彈性元素的顯示順序, 預設是0, 越小排的越靠前

---

4. 柵格佈局

佈局一直是最為重要的功能, float和clear佈局方法不恰當. 彈性佈局只適用特定情況, 柵格佈局最好

1. 建立柵格容器

   • 柵格有兩種, 行內柵格和常規柵格. 柵格容器不是塊級容器. 浮動元素不會打亂柵格容器, 柵格容器的外邊距不與其後代的外邊距摺疊.
   • 有些 CSS 屬性和功能不能用在柵格容器和柵格元素上
     • 柵格容器上的所有 column 屬性( 例如 column-count, columns 等) 都被忽略
     • 柵格容器沒有 ::first-line 和 ::first-letter 偽元素, 如果使用, 將被忽略
     • 柵格元素 (而非柵格容器) 上的 float 和 clear 屬性將被忽略. 儘管如此, float 屬性對柵格容器中子元素的 display 屬性的計算還是有影響的, 因為柵格元素的 display 值在變成柵格元素之前計算
     • vertical-align 屬性對柵格元素不起作用, 不過可能會影響柵格元素中的內容
     • 如果為柵格容器宣告的 display 值是 inline-grid, 而目標元素是浮動的或絕對定位的, 那麼 display 的計算值將變為 grid (取代 inline-grid)

2. 基本的柵格術語

   • 柵格容器是確立柵格格式化上下文的框體, 即定義一個柵格區域, 其中的元素根據柵格佈局規則排布. 柵格元素是在柵格格式化上下文中參與柵格佈局的東西
   • 柵格軌道, 兩條相鄰的柵格線之間夾住的整個區域, 從柵格容器的一邊延續到對面, 即柵格列或柵格行. 柵格軌道的尺寸由柵格線的位置決定. 可以對比表格中的列和行理解. 用適用性更廣的語言來說, 可以稱之為塊級軸和行內軸軌道
   • 柵格單元, 指四條柵格線限定的區域, 內部沒有其他柵格線貫穿, 類似單元格. 這是柵格佈局中區域的最小單元. 柵格單元不能直接使用 CSS 柵格屬性處理, 既沒有屬效能把一個柵格元素放在指定的柵格單元中
   • 柵格區域, 值任何四條柵格限定的矩形區域, 由一個或多個柵格單元構成. 最小的柵格區域是一個柵格單元, 最大的柵格區域是柵格中所有的柵格單元. 單個區域能使用 CSS 柵格屬性直接處理, 定義好柵格區域後即可在其中放置柵格元素

3. 放置柵格線

   • grid-template-rows, grid-template-columns, 百分比相對容器, 使用這兩個屬性可以大致定義柵格模板中的柵格線, 一條柵格線始終可以使用數字引用, 此外創作人員也可以為其命名.

   • 固定寬度的柵格軌道

     #grid{
     	display: grid;
         grid-template-columns: 
             [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
         grid-template-rows:
             [start col-a] 200px [col-b] 50% [col-c] 100px [stop end last];
     }
     

     使用 100% 可能導致當前行被推到容器外面, 這個問題的處理方式有兩種, 一種是設定極值, minmax(a, b), a是最小尺寸, b是最大尺寸, 然後在尺寸內儘量佔滿全部. 還可以使用calc() 計算.

   • 彈性柵格軌道

     • 彈性柵格軌道的尺寸基於彈性容器中非彈性軌道以外的恐懼確定, 或者基於整個軌道中的具體內容而定.
     • 份數單位, 把餘下空間分成一定份數, 分配給各欄, 可以使用 fr 單位, 可以寫成 grid-template-rows:1fr 1fr 1fr 1fr, grid-template-rows:2em 1fr 1fr 10%: 不管中間有多大空間, 平均分成兩份. 如果想確保一個最小值, 其中一列可以寫成 minmax(5em, 3fr), 但是最小值部分不允許使用 fr 單位, 設定最大值 minmax(0, 500px), 通常為500px
     • 根據內容設定軌道的尺寸, min-content 和 max-content

     #grid{
         display: grid;
         grid-template-columns: 
             max-content max-content max-content max-content;
         grid-template-rows:
             max-content max-content max-content max-content;
     }
     

     • 需要使用 minmax 限定柵格軌道的尺寸

       #grid{
       	display: grid;
           grid-template-columns: 
               minmax(0, max-content)  minmax(0, max-content)  minmax(0, max-content)  minmax(0, max-content);
         
       }
       

   • 根據軌道中的內容適配, fit-content(argument), minmax(min-content, max-content)

   • 重複柵格線, grid-template-columns: repeat(3, 2em 1fr 1fr) 2em;

     • 自動填充的軌道, 一直重複, 直到沒有空間, repeat(auto-fill, [top] 5em [bottom]);

     • 自動重複的侷限是, 只能有一個可選的柵格線名稱, 一個尺寸固定的軌道和另一個可選的柵格線名稱. 不能個重複多個尺寸固定的軌道, 也不能重複多個尺寸彈性變化的軌道. 在一個軌道模板中只能有一個自動重複的模式

     • 固定數量的重複模式可以和自動填充的軌道結合在一起使用

       #grid{
       	display: grid;
           grid-template-columns: 
               repeat(3, 20em) reapeat(auto-fill, 2em);
          	或 repeat(auto-fill, 2em) repeat(3, 20em);
       }
       

     • 使用 auto-fit , 沒有柵格元素的軌道將被剔除, 除此之外, auto-fit 的行為與 auto-fill 一樣

   • 柵格區域, 把柵格畫出來, grid-template-areas, 字元任意

     • #grid{
       	display: grid;
         	grid-template-areas:
               "h h h h"
               "l c c r"
               "l f f f";
       

     • 每個標識單位單邊一個柵格單元, 合併的形狀必須為矩形, 不想使用的柵格單元可用一個 . 或多個 ... 字元佔位

     • 命名柵格區域就自動為首位兩條柵格線命名了, 舉例, header區域, 第一條列柵格線和第一條行柵格線都是 header-start, 結尾的列柵格線和行柵格線都是 header-end, 也可以反向操作, 按規則命名柵格線從而命名柵格區域

4. 在柵格中附加元素

   • 使用行線和列線, grid-row-start, grid-row-end,grid-column-start, grid-column-end

     • 使用方式

     • .one{
           grid-row-start: 2; grid-row-end: 4;
           grid-column-start: 5; grid-column-end: 10;
       }
       .three{
           grid-row-start: 4; grid-column-start: 6;
       }
       # 沒寫end預設向後移動一位
       

     • 還可以把結束值改為 span 1, span. span 後面的數字是指 "跨指定數目的柵格軌道". grid-column-end: span 1, span 後面的數字不能為 0 或負數. 開始值也可以是 span, 代表從結束往前. 與span後的數字不同, 柵格線的編號可以使用負數, 表示從後向前. span後出現名稱, span 2 col-a: 表示以 col-a 為名稱的後兩位

     • 還可以引用柵格線名稱的方式, 即通過柵格區名稱的方式

     • grid-template-areas:
       	"header header header header"
       	"leftside content content rightside"
       	"leftside footer footer footer";
       #masthead{
           grid-row-start: header;
           grid-column-start: header; grid-row-end: header;
       }
       #sidebar{
           grid-row-start: 2; grid-row-end: 4;
           grid-column-start: leftside / span 1;
       }
       #main{
           grid-row-start: content; grid-row-end: content;
           grid-column-start: content;
       }
       #navbar{
           grid-row-start: rightside; grd-row-end: 3;
           grid-column-start: rightside;
       }
       #footer{
           grid-row-start: 3; grid-row-end: span 1;
           grid-column-start: footer; grid-column-end: footer;
       }
       

   • 行和列的簡寫屬性, grid-row, grid-column, 適用於柵格元素和絕對定位的元素, grid-row: R3 / 7; grid-column: col-B / span 2;

     • 以斜線分割的兩個部分中, 前一部分定義的是開始柵格線, 後一部分定義的是結束柵格線.
     • 如果值中沒有斜線, 那麼定義的是開始柵格線, 結束柵格線取決於開始柵格線的值. 如果開始柵格線是用名稱引用的, 那麼結束柵格線也使用那個名稱引用. 如果只提供一個數字, 那麼第二個數字被設為auto. 使用相同的名稱命名柵格線和柵格區域是有一定風險的.
     • 最好不要使用相同的名稱命名柵格區域和柵格線

   • 隱式柵格

     • 但柵格元素超出了顯式定義的柵格時, 瀏覽器會再建立隱式柵格線, 可以根據條件新建命名的柵格線

   • 錯誤處理

     • 開始線和結束線互換, 結果對調

     • 開始線和結束線 都使用 span, 結束線的值將被丟棄, 替換為auto

     • 如果只用具名跨度指明柵格元素的位置, 該如何處理

       grid-row-start: span footer;
       grid-row-end: auto;
       

       規範不允許這樣做, 因此, span footer 將替換為 span 1

   • 使用區域, grid-area, 直接引用柵格區域 grid-area: header , 柵格線順序, 上左下右, grid-area: 1 / 1 / 2 / 2; 只有三個值, 那麼缺少的 grid-column-end 假如是名字, 那麼就和 grid-column-start 的值相同, 如果開始線的值是一個數字, 那麼結束線的值被設為auto. 如果只有兩個值或一個值也是這樣處理, 名字和數值是不同處理方案

   • 柵格元素重疊, 重疊時會分層

5. 柵格流

   • 柵格流主要分為兩種模式, 即行優先和列優先, 不過二者都可以通過密集流(denseflow)增強. 柵格流通過 grid-auto-flow 屬性設定.
   • grid-auto-flow 取值 row(預設), column || dense, 先填滿一行, 再下一行. column, 先填滿一列, 再下一列.
   • 柵格流放的是柵格區域, 再把柵格元素附加到柵格區域中. 如果自動流動的元素比所在的列寬, 或者比所在的行高, 解決方式有 新增 tall 或 wide 類( 或二者兼具)
   • 行流的工作方式, 在每一行從左到右排, 如果有足夠的恐懼放下一個柵格元素, 就把柵格元素放在那, 如果柵格元素被其他柵格元素佔據了, 就跳過那個柵格元素.
   • 如果想讓柵格元素儘量靠近, 而不管順序會受到什麼影響, 只需要在grid-auto-flow的值里加上關鍵字dense
   • 設為密集柵格流時, 瀏覽器會沿流動方向 ( row 或 column ) 從起點 ( 在從左到右書寫的語言中是左上角 ) 開始掃描整個柵格, 找到能放下的就放心, 密集柵格流能讓相簿更緊湊

6. 自動增加柵格線

   • 預設情況下, 自動增加的行是所需的最小尺寸. 想進一步控制尺寸, 使用 grid-auto-rows 和 grid-auto-columns 屬性, 取值: 可以是一個尺寸值, 也可以是一對極值, minmax()
   • 使用 grid-auto-rows: 80px;

7. grid簡寫屬性

   • 以簡潔的句法定義柵格模板, 或者設定柵格流, 併為自動增加的軌道設定尺寸. 但是二者不能同時設定. 此外, 未定義的值都重置為初始值

   • grid:
     	"header header header header" 3em
     	". content sidebar ." 1fr
     	"footer footer footer footer" 5em /
     	2em 3fr minmax(10em, 1fr) 2em;
     # 行軌道與列軌道直接以斜線分割
     # 等價於
     grid-template-areas:
     	"header header header header"
     	". content sidebar ." 
     	"footer footer footer footer";
     grid-template-rows: 3em 1fr 5em;
     grid-template-columns: 2em 3fr minmax(10em, 1fr) 2em;
     

   • 融合 grid-auto-flow, grid-auto-rows 及 grid-auto-columns

   • grid-auto-flow: dense rows;
     grid-auto-rows: 2em; 
     grid-auto-columns: minmax( 1em, 3em);
     # 等效
     grid: dense rows 2em / minmax(1em, 3em);
     

   • 相同的結果, 使用 grid 屬性時的輸入量更好. 如果簡寫, 與列軌道和行軌道相關的屬性都歸為預設值. 因此, 下面兩個規則是等效的:

     grid: dense rows 2em / minmax(1em, 3em);
     # 等效
     grid: 
     dense rows 2em / minmax(1em, 3em);
     grid-template-rows: auto;
     grid-template-columns: auto;
     

   • 子柵格, grid 屬性還可以取一個值: subgrid, 每個 module 元素中的柵格元素 ( 即其子元素 ) 將根據 #grid 定義的柵格對齊.

8. 釋放柵格空間

   • 欄距, 兩個柵格軌道之間的間隔. 一個軸上只能設定一個間隔值. 使用 grid-row-gap, grid-column-gap, 取值只能是數字和百分比. 可以寫極值. 使用

     #grid{
      display: grid; height: 500px;
         grid-template-rows: 100px 1fr 1fr 75px;
         grid-row-gap: 15px;
     }
     

   • 簡寫屬性, grid-gap, 目前改為 gap, 定義兩個, 一個行欄距, 一個列欄距

   • 柵格元素與盒模型

     • 當 width 和 height 的值都是 auto. 所有元素可以根據需要自由伸縮. 如果width 或 height 的值不是 auto, 為了滿足算式, 外邊距的值將被覆蓋.
     • 計算柵格軌道的尺寸時將會忽略柵格元素的外邊距
     • 尺寸超出後做出讓步的是右外邊距和下外邊距
     • 與塊級佈局一樣, 可以使用auto值指定讓那邊的外邊距做出讓步. 假設我們想讓柵格元素向柵格區域的右邊對齊. 把柵格元素的左外邊距設成 auto 便會得到這樣的結果
     • 把上下外邊距都設為 auto, 元素將縱向居中顯示, 開始柵格線和結束柵格區域作用容納塊和定位上下文, 柵格元素就在這個上下文中定位
     • 不過, 絕對定位帶來一個問題: 與柵格線有關的額屬性, 其 auto 值的行為變了, 例如, 在絕對定位的柵格元素上應用 grid-column-end:auto, 結束柵格線為一條新的特殊柵格線, 這種行為的一個影響是, 如果絕對定位的柵格元素沒有指定開始柵格線和結束柵格線, 那麼定位上下文為柵格元素容器的內邊距內邊界

9. 柵格的對齊方式

   • 柵格佈局的對齊

     屬性	對齊的目標	適用於
     justify-self	行內方向上的一個柵格元素	柵格元素
     justify-items	行內方向上的全部柵格元素	柵格容器
     justify-content	行內方向上的整個柵格	柵格容器
     align-self	塊級方向上的一個柵格元素	柵格元素
     align-items	塊級方向上的全部柵格元素	柵格容器
     align-content	塊級方向上的整個柵格	柵格容器

     • 只要沒有顯式設定 width 或 height , 元素的內容將自動 "收縮" , 而不是像預設行為那樣, 佔滿整個柵格區域. left 和 right 在縱向對齊方式上當做 start 處理
     • 在橫軸對齊, self-start(RTL) 和 self-end 與預期一致, 但是, 在縱軸上, RTL失效, self-start 在上, self-end 在下
     • stretch, 在指定的方向上拉伸元素, 從一邊延伸到另一邊, 條件是寬高設為auto, 否則無效果
     • 縱向對齊還有兩個值可用, align-self: last-baseline;, align-self: baseline;

   • 縱向對齊和橫向對齊全部元素

     • align-items 和 justify-items, 這兩個屬性的取值與前一模一樣, 而且作用也相同, 只不過應用的物件是柵格容器中的全部柵格元素, 而且必須應用到柵格容器上, 而不能應用到單個柵格元素上
     • align-content 和 justify-content 屬性以一定的方式分佈柵格元素, 抑或橫向對齊或縱向對齊整個柵格, 取值, space-between, space-around, space-evenly, 還有一個比較新的值, stretch, 把餘下的空間均勻分配給各個柵格軌道, 而不分配給欄距, 沒有瀏覽器支援
     • 在縱向上, align-content, left 和 right 沒有實際意義, 因此當做 start 處理

10. 分層和排序

    • 預設情況下, 柵格元素按照在文件原始碼中的順序疊放, 即在文件原始碼中靠後的柵格元素, 像是在靠前的柵格元素前面. 如果想自己設定順序, 可以使用 z-index 屬性. 正值離螢幕近, 負值遠
    • 調整柵格元素順序的另一種方式是使用 order 屬性, 這個屬性的作用與在彈性盒佈局中一樣, 為柵格軌道中的柵格元素設定 order 值便可以改變柵格元素的順序.
    • 可以使用 order 重排柵格元素佈局順序得唯一情況是, 文件原始碼與佈局的順序不同.

---

5. 表格佈局

通過 CSS 排布表格的方式

1. 表格格式化

   • 表格的視覺排布

     • 表格內部元素生成矩形框, 有內容, 內邊距和邊框, 但是沒有外邊距
     • 一個行框 (row box) 包含一個由柵格單元構成的行
     • 一個行組 (row group) 框包含的柵格單元就是行組中各行框包含的柵格單元
     • 一個列寬 (column box) 包含一個或多個柵格單元構成的列
     • 一個列組 (column group) 框包含的柵格單元就是列組中各列寬包含的柵格單元
     • 雖然單元格可能跨多行或多列, 但是 CSS 沒有定義具體方式.
     • 單元格的矩形框不能超出表格或行組的最後一個行框. 如果表格的結構可能導致這樣的結果, 單元格必須變小, 直至能在表格或行組中放下為止.

   • 設定顯示方式的值

     • display, 取值, table, inline-table, table-row(tr), table-row-group(tbody), table-header-group(thead), table-footer-group(tfoot), table-column(col), table-column-group(colgroup), table-cell(th, td), table-caption
     • 行主導, 這個模型假設創作人員在使用標記語言時會顯示宣告行.
     • 列, 單元格可以同時屬於兩個上下文 (行和列), 儘管在文件原始碼中單元格是行的後代. 在 CSS 中, 行和行組會只能應用四個與表格無關的屬性: border, background, width 和 visibility. 僅當 border-collapse 屬性的值為 collapse 時才能為列和列組設定邊框, 僅當單元格及所在的行是透明背景時列和列組的背景才可見, width, 定義列和列組的最小寬度, visibility, 如果列或列組的 visibility 屬性值為 collapse, 那麼列 (或列組) 中的單元格都不渲染

   • 匿名錶格物件

     • CSS的表格模型可能插入七種不同的匿名物件.

       物件插入規則

     1. 如果 table-cell 元素的父元素不是 table -row, 在 table-cell 和其父元素之間插入一個匿名 table-row 物件. 插入的物件將包含 table-cell 元素的全部後續同輩元素. 父元素為 table-row-group 時上述規則也成立
     2. 如果 table-row 元素的父元素不是 table, inline-table 或 table-row-group, 在 table-row 元素和其父元素之間插入一個匿名 table 元素. 插入的物件將包含 table-row 元素的全部後續同輩元素.
     3. 如果 table-column 元素的父元素不是 table, inline-table 或 table-column-group, 在 table-column 元素和其父元素之間插入一個匿名 table 元素.
     4. 如果 table-row-group, table-header-group, table-footer-group, table-column-group 或 table-caption 元素的父元素不是 table, 在這些元素和其父元素之間插入一個匿名 table 物件
     5. 如果 table 或 inline-table 元素的子元素不是 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption, 在 table 元素和其子元素之間插入一個匿名 table-row 物件. 插入的匿名物件包括 table-row-group, table-header-group, table-footer-group, table-row 或 table-caption 之外的子元素的全部後續同輩元素.
     6. 如果 table-row-group, table-header-group 或 table-footer-group 的子元素不是 table-row, 在他們和其子元素之間插入一個匿名 table-row 物件, 插入的匿名物件包含子元素的全部後續同輩元素 ( table-row 物件自身除外 )
     7. 如果 table-row 元素的子元素不是 table-cell, 在元素和其子元素之間插入一個匿名 table-cell 物件. 插入的匿名物件包含子元素的全部後續同輩元素 (table-cell 元素自身除外)

   • 表格中的層

     • 分為 單元格, 行, 行組, 列, 列組, 表格
     • 預設情況下, 所有元素的背景都是透明的

   • 標題, caption-side, 取值 top, bottom

2. 單元格的邊框

   • 兩種邊框模式, 分離邊框模式 (separated border model) 在單元格的佈局之間有間隔時起作用. 另一個選項是摺疊邊框模型 (collapsed border model), 此時單元格之間在視覺上沒有間隔, 單元格之間的邊框將合併或摺疊在一起. 前者是預設模型, 以前版本中後者是預設模型
   • 使用 border-collapse, 取值 collapse, separate, inherit
   • 分離單元格的邊框, 在這種模型中, 表格中的每個單元格都與其他單元格相隔一定的距離, 而且單元格之間的邊框不會摺疊在一起.
     • 邊框間距, border-spacing , 這個屬性的值可以是一個或兩個長度. 如果想讓所有單元格都相距 1 畫素, border-spacing: 1px; border-spacing: 1px 5px; 橫向間距1px, 縱向間距 5px; border-spacing 值在表格上宣告, 而不是在單個單元格上宣告.
     • 處理空單元格, empty-cells, 取值, show, hide
   • 摺疊單元格的邊框
     • 摺疊邊框模型就像 HTML 排布沒有間距的單元格一樣, 它比分離邊框賦值一些
     • border-collapse 屬性的值為 collapse 時, display 屬性的值為 table 或 inline-table 的元素不能有內邊距, 但是可以有外邊距. 因此, 在摺疊邊框模型中, 表格四周的邊框與最外層的單元格之間肯定沒有間隔
     • 邊框可以應用於單元格, 行, 行組, 列和列組. 當然, 表格自身始終可以有邊框
     • 在摺疊邊框模型中, 單元格的邊框之間肯定沒有間隔.
     • 摺疊的邊框居中放在單元格之間假想的柵格線上
     • 摺疊邊框的佈局, 內邊距和內容寬度在邊框內側. 單元格之間的邊框, 一半在兩個單元格之間的柵格線一側, 另一半在柵格線的另一側, 外側的邊框超出表格寬度.
     • 邊框摺疊, 具體那條邊框勝出, 有嚴格的規則
     • 如果摺疊的邊框中有一條邊框的 border-style 為 hidden, 那麼那一條邊框在摺疊的所有邊框的優先順序最高. 這個位置的邊框都將被隱藏
     • 如果所有邊框都可見, 那麼較寬的邊框比較窄的邊框優先順序高
     • 如果摺疊的各個邊框具有相同的寬度, 但是式樣不同, 那麼優先順序從大到小的順序為: double, solid, dashed, dotted, ridge, outset, groove, inset, none
     • 如果摺疊的各個邊框具有相同的樣式和寬度, 但是樣式不同, 這些樣式從這些元素中獲取, 優先順序從高到低分別為: 單元格, 行, 行組, 列, 列組, 表格.

3. 表格的尺寸

   • 寬度, table-layout, 取值, auto, fixed. 固定寬度的表格佈局比自動寬度模型快一些

     • 固定佈局, 這種模型中, 佈局由表格, 列和單元格的寬度決定, 如果列元素的 width 屬性的值不是 auto, 設定的就是整列的寬度, 如果列的寬度是auto, 但是表格第一行中位於這一列的單元格的 width 屬性的值不是 auto, 那麼這個單元格的寬度就是整列的跨度. 如果這個單元格跨多列, 其寬度將平分到各列中. 如果列的寬度仍是自動確定的, 將自動確定, 儘可能保持各列寬度相等.
     • 自動佈局, 自動佈局與 HTML 常年使用的表格佈局基本一樣.計算過程

     1. 計算一列中每個單元格的最小寬度(換行)和最大寬度(不換行)

     2. 計算各列的最小寬度和最大寬度

     3. 如果單元格橫跨多列, 那麼所跨的那幾列的最小寬度之和必須等於單元格的最小寬度. 同樣, 列的最大寬度之和也要等於橫跨多列的單元格的最大寬度.

        計算表格的寬度

     4. 如果表格的寬度值不是 auto, 比較表格寬度的計算值與每一列的寬度之和加上邊框和單元格間距 (使用百分數設定的寬度可能就在此時計算). 兩者之中較大的那個就是表格的最終寬度. 如果表格寬度的計算值比列寬度, 邊框和間距之和大, 差值除以列數後得到的值將增加到各列上.

     5. 如果表格寬度的計算值是 auto, 表格的最終寬度等於列寬度, 邊框和間距之和, 這就意味著, 表格的寬度正好能放得下內容, 這與傳統的 HTML 表格是一樣的. 寬度為百分數的列將以哪個百分數為限, 但使用者代理不一樣滿足這個限制.

   • 高度, 最簡單的情況, 通過 height 屬性顯式設定表格的高度. 此時, 表格的高度由 height 屬性的值定義. height 更像是 min-height. 如果表格的 height 屬性的值為 auto, 那麼表格的高度等於表格中每一行的高度之和加上邊框和單元格的間距. 最好不要為表格設定高度

   • 對齊方式, 橫向對齊, 使用 text-align 屬性, 縱向對齊, vertical-align 屬性設定, 三個值, top, bottom, middle, baseline, 每種對齊效果都是通過自動增加單元格的內邊距實現的, baseline 由第一行文字的基線定義. vertical-align 的其他值, sub, super, text-top 和 text-bottom, 應用到單元格上被忽略, 視為baseline, 有時被視為 top