## CSS Box Model（區塊模型）簡介 在 CSS 中，每個 HTML 元素都可以視為一個矩形盒子，稱為 **Box Model**。由內到外依序包含： 1. **Content（內容區）**：文字、圖片等實際內容。 2. **Padding（內距）**：內容與邊框之間的空間。 3. **Border（邊框）**：包住內容與內距的線條。 4. **Margin（外距）**：元素與其他元素之間的距離。 結構如下： ```text ┌────────────── Margin ──────────────┐ │ ┌──────────── Border ───────────┐ │ │ │ ┌──────── Padding ─────────┐ │ │ │ │ │ Content │ │ │ │ │ └──────────────────────────┘ │ │ │ └─────────────────────────────────┘ │ └──────────────────────────────────────┘ ``` --- ## 使用 Inline CSS 的範例 以下直接在 HTML 元素的 `style` 屬性中設定 CSS： ```html <div style=" width: 300px; height: 100px; padding: 20px; border: 5px solid #3498db; margin: 30px; background-color: #eaf6ff; " > 這是一個使用 Box Model 的區塊 </div> ``` 此元素包含： - `width: 300px`：內容區寬度 - `height: 100px`：內容區高度 - `padding: 20px`：內容四周的內距 - `border: 5px solid #3498db`：5 像素藍色實線邊框 - `margin: 30px`：與其他元素保持 30 像素距離 - `background-color`：背景色通常會延伸到內容區與內距區 --- ## 常見 Box Model 屬性 ### 1. `width` 與 `height` 設定元素的寬度與高度： ```html <div style="width: 250px; height: 120px; background-color: lightgray;"> 固定寬高的區塊 </div> ``` 預設情況下，`width` 和 `height` 指的是 **Content 區域**，不包含 padding 和 border。 --- ### 2. `padding`：內距 設定內容與邊框之間的距離： ```html <div style="padding: 20px; background-color: #fff3cd;"> 四個方向都是 20px </div> ``` 也可以分別設定四個方向： ```html <div style=" padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px; background-color: #d1ecf1; " > 上、右、下、左的內距不同 </div> ``` 縮寫方式： ```html <div style="padding: 10px 20px 30px 40px;"> 順序為：上、右、下、左 </div> ``` 常見縮寫規則： ```css padding: 10px; /* 四邊都是 10px */ padding: 10px 20px; /* 上下 10px，左右 20px */ padding: 10px 20px 30px; /* 上 10px，左右 20px，下 30px */ padding: 10px 20px 30px 40px; /* 上右下左 */ ``` --- ### 3. `border`：邊框 設定邊框的寬度、樣式與顏色： ```html <div style="border: 2px solid black;"> 黑色實線邊框 </div> ``` 常見邊框樣式包括： ```html <div style="border: 3px dashed red; margin: 10px;"> 紅色虛線邊框 </div> <div style="border: 3px dotted green; margin: 10px;"> 綠色點線邊框 </div> <div style="border: 3px double purple; margin: 10px;"> 紫色雙線邊框 </div> ``` 也可以只設定單一方向： ```html <div style="border-bottom: 2px solid #333;"> 只有底部有邊框 </div> ``` --- ### 4. `margin`：外距 設定元素與其他元素之間的距離： ```html <div style="margin: 20px; background-color: #f8d7da;"> 四周都是 20px 外距 </div> ``` 分別設定方向： ```html <div style="margin-top: 10px; margin-bottom: 30px;"> 上方 10px，下方 30px </div> ``` 使用 `auto` 置中： ```html <div style=" width: 300px; margin: 20px auto; padding: 15px; background-color: #d4edda; " > 寬度固定，左右自動置中 </div> ``` > `margin: 20px auto` 表示上下外距為 20px，左右外距由瀏覽器自動分配。 --- ## `box-sizing`：控制寬高計算方式 ### 預設：`content-box` ```html <div style=" box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid black; " > 實際寬度為 250px </div> ``` 實際寬度為： ```text 200px（內容） + 20px × 2（左右 padding） + 5px × 2（左右 border） = 250px ``` ### 常用：`border-box` ```html <div style=" box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; " > 實際寬度固定為 200px </div> ``` 使用 `border-box` 時，`width` 會包含： ```text 內容區 + padding + border ``` 因此在實務開發中常見以下設定： ```html <div style=" box-sizing: border-box; width: 300px; padding: 20px; border: 2px solid #333; " > 寬度容易控制的區塊 </div> ``` --- ## 其他常見相關屬性 ### `border-radius`：圓角 ```html <div style=" padding: 20px; border: 1px solid #ccc; border-radius: 10px; " > 圓角區塊 </div> ``` ### `overflow`：內容超出時的處理方式 ```html <div style=" width: 200px; height: 80px; overflow: auto; border: 1px solid black; " > 這是一段較長的內容，當內容超過指定寬高時，可以使用捲軸查看剩餘內容。 </div> ``` 常見值： - `visible`：預設，超出內容仍顯示 - `hidden`：隱藏超出的內容 - `scroll`：顯示捲軸 - `auto`：需要時才顯示捲軸 --- ## 完整 Inline CSS 範例 ```html <div style=" box-sizing: border-box; width: 320px; padding: 24px; margin: 30px auto; border: 2px solid #2980b9; border-radius: 12px; background-color: #ecf6ff; color: #2c3e50; overflow: auto; " > <h2 style="margin: 0 0 12px 0;">Box Model 範例</h2> <p style="margin: 0; line-height: 1.6;"> 這個區塊使用了寬度、內距、外距、邊框、圓角與 box-sizing 等常見 CSS 屬性。 </p> </div> ``` 重點是：元素的實際尺寸不只受到 `width` 和 `height` 影響，也要考慮 `padding`、`border` 與 `margin`。若希望寬高計算較直覺，通常會使用： ```html <div style="box-sizing: border-box;"> ... </div> ```