BoxModel.md

Box Model

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

1. 盒子模型結構

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

  • 內容(content):元素內的實際內容,如文字或圖片,可透過 widthheight 設定尺寸。

  • 內距(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. floatclear

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

float: left;
  • clear:用於清除浮動造成的佈局錯亂。

clear: both;

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

Last updated