文章

佈局基礎

發布於 更新於
作者 Ned Hsu 6 分鐘閱讀

佈局基礎

CSS 佈局基礎涉及到如何排列和定位網頁上的元素。掌握 CSS 佈局是創建響應式和易於使用的網頁設計的重要技能。以下是 CSS 佈局的幾個關鍵概念和技術，包括 標準文檔流、浮動（float）、清除（clear）、定位（position） 和 Flexbox、Grid 等現代佈局工具。

1. 標準文檔流

在默認情況下，HTML 元素遵循 標準文檔流（normal document flow） 進行排列：

  • 塊級元素（block-level elements）（如 <div>、<p>、<h1> 等）：在頁面上佔據整個可用寬度，並在每個元素之前和之後都有換行。
  • 行內元素（inline elements）（如 <span>、<a>、<strong> 等）：只佔據其內容的寬度，並與相鄰的行內元素共享同一行。

2. 浮動（Float）

浮動（float） 用於將元素從標準文檔流中移出，並使其向左或向右對齊，通常用於創建多欄佈局或環繞文本效果。

  • 語法：
    1

    float: left | right | none;
  • 值的說明：
    • left：將元素向左浮動。
    • right：將元素向右浮動。
    • none：默認值，不使用浮動。
  • 範例：
    1
2
3
4
5
6
7
8
9

    .sidebar {
    width: 30%;
    float: left; /* 將側邊欄向左浮動 */
}

.content {
    width: 70%;
    float: right; /* 將主內容向右浮動 */
}

3. 清除浮動（Clear）

當使用浮動元素時，非浮動元素可能會圍繞浮動元素流動，這會導致佈局錯亂。清除（clear） 屬性用於停止元素旁邊的浮動元素，使其下方內容不受浮動元素的影響。

  • 語法：
    1

    clear: left | right | both | none;
  • 值的說明：
    • left：清除左側浮動。
    • right：清除右側浮動。
    • both：清除兩側浮動。
    • none：不清除浮動（默認值）。
  • 範例：
    1
2
3

    .clearfix {
    clear: both; /* 清除左右兩側的浮動 */
}

4. 定位（Position）

定位（position） 屬性允許我們精確地控制元素的位置。CSS 提供了多種定位方法，如 靜態（static）、相對（relative）、絕對（absolute）、固定（fixed） 和 粘性（sticky）。

  • 語法：
    1

    position: static | relative | absolute | fixed | sticky;
  • 值的說明：
    • static：默認值，按標準文檔流排列。
    • relative：相對於元素在標準文檔流中的位置進行定位。
    • absolute：相對於最近的定位祖先元素進行定位，若無則相對於 <html>。
    • fixed：相對於瀏覽器窗口進行定位。
    • sticky：元素在特定條件下變得固定（例如當滾動到特定位置時）。
  • 範例：
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

    .relative-box {
    position: relative;
    top: 20px; /* 相對於其標準位置向下移動20px */
}

.absolute-box {
    position: absolute;
    top: 50px;
    left: 100px; /* 相對於最近的定位祖先元素進行定位 */
}

.fixed-box {
    position: fixed;
    bottom: 10px;
    right: 20px; /* 固定在窗口的右下角 */
}

5. Flexbox 佈局

Flexbox（Flexible Box Layout） 是一種適用於單一方向（行或列）的佈局模型，能夠更輕鬆地排列和對齊元素，特別是在創建響應式佈局時非常有用。

  • 主要屬性：
    • display: flex：將父容器設置為彈性容器。
    • flex-direction：設置主軸方向（默認為 row）。
    • justify-content：設置主軸上的子元素對齊方式（如 flex-start、center、space-between）。
    • align-items：設置交叉軸上的子元素對齊方式（如 flex-start、center、stretch）。
  • 範例：
    1
2
3
4
5
6

    .flex-container {
    display: flex; /* 設置為彈性容器 */
    flex-direction: row; /* 子元素排列為水平方向 */
    justify-content: space-between; /* 子元素之間均勻分布 */
    align-items: center; /* 子元素在交叉軸上居中對齊 */
}

6. Grid 佈局

Grid Layout 是另一種強大的 CSS 佈局工具，用於創建二維佈局，允許更複雜的行列設計。

  • 主要屬性：
    • display: grid：將父容器設置為網格容器。
    • grid-template-columns：定義列的數量和寬度。
    • grid-template-rows：定義行的數量和高度。
    • gap：設置網格之間的間距。
    • grid-column 和 grid-row：設置子元素的網格位置。
  • 範例：
    1
2
3
4
5
6

    .grid-container {
    display: grid; /* 設置為網格容器 */
    grid-template-columns: 1fr 2fr; /* 定義兩列，第一列佔1份空間，第二列佔2份空間 */
    grid-template-rows: 100px auto; /* 定義兩行，第一行高100px，第二行自動填充 */
    gap: 20px; /* 行列之間的間距為20px */
}

7. 小結

掌握 CSS 佈局技術是設計響應式和美觀的網頁的關鍵。使用 Float 和 Clear 來創建簡單的佈局，利用 Position 精確控制元素位置，並運用現代的 Flexbox 和 Grid 佈局工具來創建更靈活和複雜的佈局設計。熟悉這些技術將有助於創建符合需求的網頁佈局。

Software, CSS
CSS
本文章以 CC BY 4.0 授權