5. CSS 佈局

學習成果

• 理解普通流是瀏覽器佈局塊級和內聯內容時的預設方式。

• display、float 和 position 等屬性旨在改變瀏覽器佈局內容的方式。

資源

• CSS 佈局簡介

• 普通流

學習成果

• 理解浮動的目的——用於在文字列中浮動影像，或者其他有趣的技巧，如首字下沉和浮動插入資訊框。

• 理解浮動曾經用於多列布局，但由於現在有了更好的工具，這種情況已不再是這樣（詳情請參閱 5.4 現代佈局）。

• 使用 float 屬性建立浮動。

• 使用 clear 清除浮動，以及 display: flow-root 值。

資源

• 浮動

• 關於浮動的一切, CSS-Tricks (2021)

學習成果

• 理解 static 定位是元素在頁面上定位的預設方式。

• 相對定位

  • 理解相對定位的元素會保留在普通流中。

  • 最終的佈局位置可以使用 top、bottom、left 和 right 屬性進行修改。

• 絕對定位

  • 絕對（以及固定/粘性）定位會將元素完全移出普通流，放在單獨的層上。

  • top、bottom、left、right 和 inset 對絕對定位元素的影響與對相對定位元素的影響不同。

  • 透過定位父級元素來設定已定位元素。的定位上下文。

• 固定和粘性定位

  • 理解它們與絕對定位的區別。

• 理解 z-index 是什麼，以及如何使用 z-index 屬性控制已定位元素的堆疊順序。

資源

• 定位

• 題外話：Position: relative & absolute, Scrimba 課程合作伙伴

• 層疊上下文

學習成果

• 總的來說，理解現代 CSS 佈局技術。

• 理解對於基本的放置任務，以下工具可能有點“大材小用”。學習簡單的老式技術以及它們在哪些方面仍然有效。

  • 使用邊距和內邊距進行間距設定。

  • 使用自動邊距進行水平居中任務（例如 margin: 0 auto）。

• Flexbox

  • 理解 flexbox 的目的——在一維空間中靈活地佈局一組塊級或內聯元素。

    • 請參閱 Scrimba 課程合作伙伴的 我們有一個 flexbox 可以解決的問題 以獲取用例示例。

  • 理解 flex 術語——flex 容器、flex 項、主軸和交叉軸。

  • display: flex，以及它預設提供的功能。

  • 行和列，以及如何將內容換行到新行和新列。

  • flex 項的靈活調整大小。

  • 對齊和分佈內容。

  • 調整 flex 項的順序。

• CSS Grid

  • 理解 CSS Grid 的目的——在二維空間中靈活地佈局一組塊級或內聯元素。

  • 理解 grid 術語——行、列、間隙和溝槽。

  • display: grid，以及它預設提供的功能。

  • 定義 grid 行和列

    • fr 單位。

    • minmax().

  • 定義間隙。

  • 在 grid 上定位元素。

資源

• Flexbox

• Grid

學習成果

• 理解什麼是響應式設計——設計 Web 佈局，使其具有靈活性，並能在不同的裝置螢幕尺寸、解析度等方面良好執行。

• 理解現代佈局工具（如 grid 和 flexbox）與響應式設計之間的關係。

• 媒體查詢

  • 移動優先技術。

  • 理解斷點。

  • 使用 width 和 height 媒體查詢建立響應式佈局。

• <meta viewport="">，以及如何使用它使 Web 文件在移動裝置上正確顯示。

  • 為了可訪問性，切勿設定 user-scalable=no。

資源

• 構建響應式網站：模組介紹, Scrimba 課程合作伙伴

• 響應式設計

• 媒體查詢入門指南