討論區
浴火重生的雞
2024-08-07|閱讀時間 ‧ 約 26 分鐘

CSS入門-Day5：盒模型

盒模型概述

CSS 盒模型由以下部分組成：

  1. 內容區域（Content Area）：顯示內容的實際區域（如文字、圖像等）。
  2. 內邊距（Padding）：內容區域與邊框之間的間距。
  3. 邊框（Border）：包圍內容區域和內邊距的邊框。
  4. 外邊距（Margin）：元素與相鄰元素之間的距離。

這些部分組成了一個元素的完整顯示區域。下圖展示了盒模型的結構：

+---------------------------+
|        margin             |
|  +---------------------+  |
|  |       border        |  |
|  |  +--------------+   |  |
|  |  |   padding    |   |  |
|  |  | +----------+ |   |  |
|  |  | |  content | |   |  |
|  |  | +----------+ |   |  |
|  |  +--------------+   |  |
|  +---------------------+  |
+---------------------------+

盒模型屬性

內邊距（Padding）

設置內容區域與邊框之間的間距，可以分別設置四個方向的內邊距：上、右、下、左。

  • 單方向內邊距：
    div {
      padding-top: 10px;
      padding-right: 20px;
      padding-bottom: 30px;
      padding-left: 40px;
    }

  • 簡寫屬性：
    div {
      padding: 10px 20px 30px 40px;  /* 上右下左 */
      /* 或者 */
      padding: 10px;  /* 四個方向都設置為 10px */
    }

邊框（Border）

設置包圍內容區域和內邊距的邊框，可以設置邊框寬度、樣式和顏色。

  • 單方向邊框：
    div {
      border-top-width: 5px;
      border-top-style: solid;
      border-top-color: red;
    }

  • 簡寫屬性：
    div {
      border: 5px solid red;  /* 寬度、樣式和顏色 */
    }

外邊距（Margin）

設置元素與相鄰元素之間的距離，可以分別設置四個方向的外邊距：上、右、下、左。

  • 單方向外邊距：
    div {
      margin-top: 10px;
      margin-right: 20px;
      margin-bottom: 30px;
      margin-left: 40px;
    }

  • 簡寫屬性：
    div {
      margin: 10px 20px 30px 40px;  /* 上右下左 */
      /* 或者 */
      margin: 10px;  /* 四個方向都設置為 10px */
    }

盒模型調試

現代瀏覽器提供了開發者工具，可以用來調試和檢查元素的盒模型。在開發者工具中，可以查看元素的內容區域、內邊距、邊框和外邊距。

使用開發者工具

以下是如何在常見瀏覽器中打開開發者工具：

  • Chrome：右鍵點擊頁面上的任何元素，選擇“檢查”或按 Ctrl + Shift + I（Windows）/Cmd + Option + I（Mac）。
  • Firefox：右鍵點擊頁面上的任何元素，選擇“檢查元素”或按 Ctrl + Shift + I（Windows）/Cmd + Option + I（Mac）。
  • Safari：右鍵點擊頁面上的任何元素，選擇“檢查元素”或按 Cmd + Option + I（Mac）。

查看盒模型

在開發者工具中選擇某個元素後，可以查看該元素的盒模型，通常在“元素”或“樣式”面板中。這裡會顯示內容區域、內邊距、邊框和外邊距的大小和詳細信息。

完整示例

這裡是一個完整的示例，展示如何使用盒模型屬性來設置內邊距、邊框和外邊距，並使用瀏覽器開發者工具來調試。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 盒模型示例</title>
  <style>
    .box {
      width: 200px;
      height: 100px;
      padding: 20px;
      border: 5px solid blue;
      margin: 30px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div class="box">這是一個示例盒子。</div>
</body>
</html>

分享至
成為作者繼續創作的動力吧！
討論區
追蹤
討論區
追蹤
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

Michael楊 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.