# BoxModel

### Box Model

CSS 的盒子模型是構成 HTML 元素版面配置的基礎概念，了解這些屬性有助於掌控元素間距與排版行為。

#### 1. 盒子模型結構

HTML 元素會被視為一個矩形區塊，其結構由內而外如下：

* **內容（content）**：元素內的實際內容，如文字或圖片，可透過 `width` 與 `height` 設定尺寸。
* **內距（padding）**：內容與邊框（border）之間的空間。
* **邊框（border）**：環繞元素的線條，可設定顏色、樣式與粗細。
* **外距（margin）**：元素與其他元素之間的空間。

#### 示意圖：

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

#### 2. 基本屬性說明

**`width` / `height`**

設定元素內容區域的寬度與高度。

```css
width: 300px;
height: 200px;
```

**`padding`**

設定內容與邊框之間的空白，可針對四個方向單獨設定。

```css
padding: 10px 20px; /* 上下 10px，左右 20px */
```

**`border`**

設定邊框樣式，包括寬度、線型與顏色。

```css
border: 2px solid #000;
```

**`margin`**

設定元素與其他元素的距離，亦可使用 `margin: 0 auto;` 進行水平置中（當元素具有固定寬度時）。

```css
margin: 20px auto;
```

#### 3. 額外屬性

**`overflow`**

設定當內容超出容器範圍時的處理方式。

* `visible`（預設）：內容溢出會顯示。
* `hidden`：多餘內容會被裁切。
* `scroll`：總是顯示滾動條。
* `auto`：必要時顯示滾動條。

```css
overflow: auto;
```

**`visibility`**

控制元素是否可見，但仍保留佔位空間。

```css
visibility: hidden; /* 隱藏但仍占位 */
```

#### 4. 邊距折疊（Margin Collapse）

* **垂直邊距折疊**：上下兩個元素的 `margin` 會取最大值，而不是相加。
* **水平邊距不折疊**：左右邊距會正常相加。

#### 5. 盒模型的尺寸計算與 `box-sizing`

在預設的盒模型中（`box-sizing: content-box`），**設定的寬度與高度僅包含 content，不包含 padding 與 border**。

若想讓寬高包含 padding 與 border，可使用新的盒模型：

```css
box-sizing: border-box;
```

這樣設定後，元素的實際可視寬度與設定值一致，更利於版面控制。

***

### CSS 佈局屬性補充

學會控制盒模型後，理解以下排版屬性將幫助你打造有層次的網頁結構。

#### 1. `position` 定位屬性

| 值          | 說明                                 |
| ---------- | ---------------------------------- |
| `static`   | 預設值，依正常文件流排列                       |
| `relative` | 相對於原本位置進行微調                        |
| `absolute` | 相對於最近的定位父元素（非 static）定位            |
| `fixed`    | 相對於視窗定位，滑動不會移動                     |
| `sticky`   | 根據滾動位置從 relative 變成 fixed，常用於黏附導航列 |

#### 2. `z-index`

設定元素堆疊的層級，數值越大越上層，僅對非 `static` 定位有效。

```css
z-index: 100;
```

#### 3. `display` 顯示屬性

| 值              | 說明             |
| -------------- | -------------- |
| `block`        | 占據整行，可設定寬高     |
| `inline`       | 僅占內容寬度，無法設定寬高  |
| `inline-block` | 可設定寬高，同時在一行中排列 |
| `none`         | 不顯示元素          |

#### 4. `float` 與 `clear`

* `float`：讓元素靠左或靠右浮動，常用於圖片排版。

```css
float: left;
```

* `clear`：用於清除浮動造成的佈局錯亂。

```css
clear: both;
```

***

掌握盒子模型與佈局控制，能使你更有效地掌控網頁版面與互動結構，是現代前端開發的關鍵技能。
