BoxModel.md
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
在預設的盒模型中(box-sizing: content-box
),設定的寬度與高度僅包含 content,不包含 padding 與 border。
若想讓寬高包含 padding 與 border,可使用新的盒模型:
box-sizing: border-box;
這樣設定後,元素的實際可視寬度與設定值一致,更利於版面控制。
CSS 佈局屬性補充
學會控制盒模型後,理解以下排版屬性將幫助你打造有層次的網頁結構。
1. position
定位屬性
position
定位屬性static
預設值,依正常文件流排列
relative
相對於原本位置進行微調
absolute
相對於最近的定位父元素(非 static)定位
fixed
相對於視窗定位,滑動不會移動
sticky
根據滾動位置從 relative 變成 fixed,常用於黏附導航列
2. z-index
z-index
設定元素堆疊的層級,數值越大越上層,僅對非 static
定位有效。
z-index: 100;
3. display
顯示屬性
display
顯示屬性block
占據整行,可設定寬高
inline
僅占內容寬度,無法設定寬高
inline-block
可設定寬高,同時在一行中排列
none
不顯示元素
4. float
與 clear
float
與 clear
float
:讓元素靠左或靠右浮動,常用於圖片排版。
float: left;
clear
:用於清除浮動造成的佈局錯亂。
clear: both;
掌握盒子模型與佈局控制,能使你更有效地掌控網頁版面與互動結構,是現代前端開發的關鍵技能。
Last updated