盒模型概述
CSS 盒模型由以下部分組成：
- 內容區域（Content Area）：顯示內容的實際區域（如文字、圖像等）。
- 內邊距（Padding）：內容區域與邊框之間的間距。
- 邊框（Border）：包圍內容區域和內邊距的邊框。
- 外邊距（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>
