CSS 佈局
在前幾期的模組中，我們學習瞭如何為內容容器設定樣式和進行操作。現在是時候學習如何將這些容器在彼此之間以及與瀏覽器視口正確地佈局了。本模組將介紹浮動 (floats)、定位 (positioning)、其他現代佈局工具，以及構建能夠適應不同裝置、螢幕尺寸和解析度的響應式設計。
預備知識
教程與挑戰
- CSS 佈局簡介
-
本課程將回顧我們在前面模組中已經涉及的一些 CSS 佈局特性，例如不同的
display值，並介紹本模組將要涵蓋的一些概念。它還將深入介紹正常流 (normal flow) 的概念。 - 浮動
-
最初用於在文字塊內浮動影像的
float屬性，後來成為建立網頁多欄佈局最常用的工具之一。隨著 flexbox 和 grid 的出現，它已迴歸其最初的用途，正如本文所述。 - 定位
-
定位允許您將元素移出正常的文件流，並使其表現不同，例如，疊放在一起，或者始終停留在瀏覽器視口內的相同位置。本文將介紹不同的
position值以及如何使用它們。 - Flexbox
-
Flexbox 是一種一維佈局方法，用於以行或列的形式佈局專案。專案會彈性地填充額外空間，並縮小以適應更小的空間。本文將介紹所有基本知識。
- CSS 網格佈局
-
CSS 網格佈局 (CSS grid layout) 是一個用於 Web 的二維佈局系統。它允許您將內容組織成行和列，並提供許多功能來簡化複雜佈局的建立。本文將介紹開始使用網格佈局所需的所有知識。
- 基礎佈局理解 挑戰
-
本次挑戰將測試您對本模組到目前為止所涵蓋的佈局特性（即 flexbox、floats、grid 和 positioning）的知識。完成後，您將使用多種技術開發出一個網頁佈局。
- 響應式設計
-
隨著 Web 裝置上出現越來越多的不同螢幕尺寸，響應式 Web 設計 (RWD) 的概念也應運而生：這是一套實踐方法，允許網頁根據不同的螢幕寬度、解析度等調整其佈局和外觀。這是一個改變我們為多裝置 Web 設計方式的理念，在本文中，我們將幫助您理解掌握它所需的主要技術。
- 媒體查詢基礎
-
CSS 媒體查詢為您提供了一種僅在瀏覽器和裝置環境匹配您指定的規則時應用 CSS 的方式。媒體查詢是響應式 Web 設計的關鍵部分，因為它們允許您根據視口大小建立不同的佈局。在本課程中，您將學習媒體查詢中使用的語法，然後在一個互動式示例中使用它們，展示一個簡單的設計如何變得響應式。
檢驗你的技能
您會在教程文章之間找到“測試您的技能”文章，以在您繼續學習之前檢查您是否保留了最重要的資訊。如果您想一次性瀏覽所有這些內容，您可以在 測試您的技能：CSS 佈局 中找到它們。
附加教程
這些教程不屬於學習路徑，但它們仍然很有趣——您應該將這些視為進階目標，在完成主要的“核心”文章後可選擇學習。
- 多列布局
-
多列布局 (multiple-column layout) 規範為您提供了一種將內容排版成列的方法，就像您在報紙上看到的那樣。本文將介紹如何使用此功能。
- 實際定位示例
-
本文展示瞭如何構建一些真實世界的示例，以說明定位可以實現的功能。
- 舊版佈局方法
-
網格系統是 CSS 佈局中非常常見的功能，在 CSS 網格佈局出現之前，它們通常使用浮動或其他佈局功能來實現。您可以將佈局想象成固定數量的列（例如 4、6 或 12 列），然後將內容列放入這些想象中的列中。在本文中，我們將探討這些舊方法的工作原理，以便您瞭解它們在舊專案中的使用方式。
- 支援舊版瀏覽器
-
您的網站訪問者可能包括使用舊版瀏覽器或不支援您實現的 CSS 功能的瀏覽器的使用者。這是 Web 上一種常見的情況，新的功能不斷新增到 CSS 中。瀏覽器對這些功能的支持程度各不相同，因為不同的瀏覽器傾向於優先實現不同的功能。本文將介紹作為 Web 開發人員，如何使用現代 Web 技術來確保您的網站對使用舊技術的使用者保持可訪問性。
另見
- CSS 佈局食譜
-
CSS 佈局食譜旨在彙集常見佈局模式的解決方案，這些是您可能需要在網站上實現的。除了提供可作為專案起點的程式碼外，這些食譜還突出了佈局規範的不同用法以及作為開發人員可以做出的選擇。