BoxModel

Box Model

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

1. 盒子模型結構

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

• 內容（content）：元素內的實際內容，如文字或圖片，可透過 width 與 height 設定尺寸。

• 內距（padding）：內容與邊框（border）之間的空間。

• 邊框（border）：環繞元素的線條，可設定顏色、樣式與粗細。

• 外距（margin）：元素與其他元素之間的空間。

示意圖：

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

2. 基本屬性說明

width / height

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

width: 300px;
height: 200px;

padding

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

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

border

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

border: 2px solid #000;

margin

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

margin: 20px auto;

3. 額外屬性

overflow

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

• visible（預設）：內容溢出會顯示。

• hidden：多餘內容會被裁切。

• scroll：總是顯示滾動條。

• auto：必要時顯示滾動條。

overflow: auto;

visibility

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

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

4. 邊距折疊（Margin Collapse）

• 垂直邊距折疊：上下兩個元素的 margin 會取最大值，而不是相加。

• 水平邊距不折疊：左右邊距會正常相加。

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

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

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

box-sizing: border-box;

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

---

CSS 佈局屬性補充

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

1. position 定位屬性

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

2. z-index

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

z-index: 100;

3. display 顯示屬性

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

4. float 與 clear

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

float: left;

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

clear: both;

---

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