CSS 佈局
到目前為止，我們已經瞭解了 CSS 基礎知識，如何樣式化文字，以及如何樣式化和操作內容所在的盒子。現在，是時候看看如何正確地將盒子排列到視窗以及相互之間。我們已經介紹了必要的先決條件，所以讓我們深入研究 CSS 佈局，看看各種功能，例如：不同的顯示設定、定位、Flexbox 和 CSS 網格等現代佈局工具，以及您可能仍然需要了解的一些傳統技術。
先決條件
指南
這些文章將提供關於 CSS 中可用的基本佈局工具和技術的說明。課程結束時有一個評估，可以幫助您透過佈局網頁來檢查您對佈局方法的理解。
- CSS 佈局簡介
-
本文將回顧我們在之前的模組中已經涉及的一些 CSS 佈局功能 - 例如不同的
display值 - 並介紹一些在本模組中涵蓋的概念。 - 普通流
-
網頁上的元素會按照普通流進行佈局 - 除非我們採取措施進行改變。本文解釋了普通流的基礎知識，作為學習如何改變它的基礎。
- Flexbox
-
Flexbox 是一種一維佈局方法，用於將專案排列成行或列。專案會靈活地填充額外的空間，並在較小的空間中縮小以適應。本文解釋了所有基礎知識。學習完本指南後，您可以 測試您的 Flexbox 技能，以檢查您在繼續學習之前的理解。
- 網格
-
CSS 網格佈局是 Web 的二維佈局系統。它允許您將內容排列成行和列，並且具有許多使構建複雜佈局變得簡單直觀的功能。本文將為您提供開始頁面佈局所需的一切，然後 測試您的網格技能，然後再繼續學習。
- 浮動
-
最初用於在文字塊中浮動影像，
float屬性成為在網頁上建立多列布局最常用的工具之一。隨著 Flexbox 和網格的出現，它現在已經迴歸其原始目的，本文對此進行了說明。 - 定位
-
定位允許您將元素從正常的文件佈局流中取出，並使其表現不同，例如，彼此重疊，或始終保持在瀏覽器視窗內的相同位置。本文介紹了不同的
position值以及如何使用它們。 - 多列布局
-
多列布局規範提供了一種將內容排列成多列的方法，就像您在報紙上看到的那樣。本文介紹瞭如何使用此功能。
- 響應式設計
-
隨著越來越多的不同螢幕尺寸出現在支援網路的裝置上，響應式網頁設計 (RWD) 的概念出現了：一套允許網頁改變其佈局和外觀以適應不同螢幕寬度、解析度等的實踐。這是一個改變了我們為多裝置網路設計方式的想法，在這篇文章中，我們將幫助您瞭解掌握它所需要的關鍵技術。
- 媒體查詢入門
-
CSS 媒體查詢 為您提供了一種僅在瀏覽器和裝置環境匹配您指定的規則（例如，“視窗寬度大於 480 畫素”）時才應用 CSS 的方法。媒體查詢是響應式網頁設計的關鍵部分，因為它們允許您根據視窗的大小建立不同的佈局。它們還可以用於檢測您的網站執行環境的其他功能，例如，使用者是否使用的是觸控式螢幕而不是滑鼠。在本課程中，您將首先了解媒體查詢中使用的語法，然後您將在一個互動式示例中使用它們，展示如何使一個簡單的設計具有響應性。
- 傳統佈局方法
-
網格系統是 CSS 佈局中非常常見的特性。在CSS 網格佈局之前，它們傾向於使用浮動或其他佈局功能來實現。您首先會將您的佈局想象成一組固定的列（例如，4、6 或 12 列），然後您將您的內容列放到這些虛擬列中。在本文中，我們將探討這些舊方法是如何工作的，以便您瞭解如果您在較舊的專案上工作時它們是如何被使用的。
- 支援舊版瀏覽器
-
在本模組中，我們建議使用 flexbox 和網格作為您設計的核心佈局方法。但是，您將來開發的網站肯定會有一些訪問者使用舊的瀏覽器，或者不支援您使用的方法的瀏覽器。這種情況在網路上總是會發生——隨著新功能的開發，不同的瀏覽器會優先考慮不同的功能。本文介紹瞭如何在不排除使用舊技術的使用者的條件下使用現代網路技術。
評估
以下評估將測試您對上述指南中介紹的 CSS 佈局方法的理解。
- 佈局基礎理解
-
一項評估，透過佈局一個網頁來測試您對不同佈局方法的知識。