依主題找術語 · 51 份指南

版面與 CSS

認識內容在不同螢幕上如何決定大小、位置、間距、層次與形狀。

01 / 術語圖鑑

全部版面與 CSS術語

開啟一個術語，就能看簡單解釋、例子、使用時機、正式程度和程式名稱。

01 · 深入了解
子網格 Subgrid

子網格是放在另一個網格裡的網格，會沿用父網格的列或欄尺寸。它可以只沿用一個方向，也可以兩個方向都沿用。
02 · 核心
不透明度 Opacity

不透明度表示元素和子元素有多不透明。它可從完全透明變成完全不透明。
03 · 深入了解
內容內在尺寸 Intrinsic Sizing

內容內在尺寸是讓元素裡的內容一起決定大小，而不是只使用外部指定的固定尺寸。
04 · 核心
內距 Padding

內距是元素邊框內的空間，位在內容和邊緣之間。
05 · 深入了解
文件型版面 Documentation Layout

文件版面把導覽、文章、範例、大綱和下一篇連結放在同一閱讀畫面。
06 · 核心
文字截斷 Text Truncation

文字截斷會切掉部分文字來節省空間，並用刪節號表示單行或多行內容還沒顯示完。
07 · 深入了解
包含區塊 Containing Block

包含區塊是元素用來計算位置與百分比尺寸的參考矩形。
08 · 核心
卡片網格 Card Grid

卡片網格會重複排列可互相比較的卡片，並依可用空間調整欄數。
09 · 核心
外距 Margin

外距是元素邊框外的空間，用來拉開它和周圍版面項目的距離。
10 · 核心
長寬比 Aspect Ratio

長寬比用來表示元素的寬度和高度如何相比。
11 · 深入了解
便當網格 Bento Grid

便當網格把不同尺寸的方塊排進同一個版面，較大的跨欄區塊可顯示哪些內容更重要。
12 · 深入了解
背景模糊 Backdrop Blur

背景模糊會柔化半透明表面後方的內容，不會模糊表面本身的文字或控制項。
13 · 深入了解
容器查詢 Container Query

容器查詢讓 CSS 依元件所在容器來調整內容。它看的是容器尺寸或樣式，不只看整個視窗。
14 · 核心
留白與間距 Spacing

留白與間距是刻意留下的空間。它能把相關項目放在一起、分開不同概念，也讓版面有節奏。
15 · 核心
偽元素 Pseudo-element

偽元素能讓 CSS 選取原始 HTML 中沒有的一小部分或容器，例如第一個字或產生的裝飾。
16 · 核心
偽類 Pseudo-class

偽類是 CSS 選擇器的一部分，會依元素的狀態、位置、語言或使用者操作等條件來選取元素。
17 · 深入了解
區塊格式化情境 Block Formatting Context

區塊格式化情境（BFC）是一個獨立處理區塊版面的範圍。它能把浮動元素包在裡面，也能阻止部分外距和浮動元素影響外部內容。
18 · 深入了解
堆疊脈絡 Stacking Context

堆疊脈絡是 CSS 圖層的局部分組。元素會先在自己的群組內排序，再把整組和其他群組比較前後位置。
19 · 深入了解
堆疊環境與 Z 軸順序（教學組合） Stacking Context & Z-index — Learning Bundle

這組教學連結兩個 CSS 概念。Stacking Context 會把自己的繪製順序分開管理；z-index 則替該環境中符合條件的盒子排序。這個組合本身不是單一標準 CSS 術語。
20 · 深入了解
捲動吸附 Scroll Snap

CSS 捲動吸附能讓捲動區域在使用者捲動後，停在預先設定的對齊位置。
21 · 核心
盒模型 Box Model

CSS 盒模型用來說明元素的尺寸。每個盒子都包含內容、內距、邊框和外距。
22 · 核心
視口單位 Viewport Units

視口單位是依瀏覽器可見範圍計算的 CSS 長度。小型、大型和動態版本能處理會顯示或隱藏的瀏覽器工具列。
23 · 深入了解
最大內容尺寸 max-content

`max-content` 是內容在一般換行點都不換行時，想要占用的尺寸。
24 · 深入了解
最小內容尺寸 min-content

`min-content` 是內容在所有可換行處都換行後，能縮到的最小尺寸。
25 · 核心
單頁式版面 Single-Page Layout

單頁式版面把一個主要故事或任務放在同一個長頁面。
26 · 核心
媒體填入方式 object-fit

`object-fit` 會控制圖片、影片或類似媒體如何放進自己的容器。
27 · 深入了解
越界捲動行為 overscroll-behavior

`overscroll-behavior` 會控制捲動區域到達邊界後的行為。它可以阻止捲動接著影響外層區域，也能改變邊界回饋。
28 · 核心
項目間距 Gap

gap 是容器放在 Flexbox 或 Grid 子項目之間的空間，同一套規則會套用到每一組相鄰項目。
29 · 核心
溢位 Overflow

溢位是內容超出盒子時的狀況。CSS 可以讓內容顯示、裁切，或提供捲動。
30 · 核心
置中單欄版面 Centered Column

置中單欄版面是一個設有最大寬度的閱讀欄，左右兩側看起來留有相等空間。
31 · 深入了解
層疊分層 Cascade Layers

層疊分層是用名稱分組 CSS 規則，並先決定各組的優先順序。瀏覽器會先比較分層，再比較選擇器權重。
32 · 核心
彈性盒版面 Flexbox

Flexbox 是一次處理一個方向的 CSS 版面系統，可沿著橫列或直欄排列並分配項目。
33 · 深入了解
黏性與固定定位（教學組合） Sticky & Fixed Position — Learning Bundle

這組教學比較兩個 CSS position 值。sticky 會先留在正常流，捲動到容器內的指定位置後才停住；fixed 則以固定定位的 containing block 為基準。這個組合本身不是單一 CSS 術語。
34 · 核心
斷點與媒體查詢 Breakpoint & Media Query

斷點是版面需要改變的位置；媒體查詢會在視窗或裝置符合指定條件時套用 CSS。
35 · 深入了解
瀑布流版面 Masonry Layout

瀑布流版面會把不同高度的項目排進各欄，填滿垂直空隙，但不共用橫列線。
36 · 核心
App 固定外框 App Shell

App 固定外框是在內容換頁時仍保留的小框架。它常放主要導覽、帳戶和狀態。
37 · 核心
clamp() 範圍函式 clamp()

`clamp()` 會採用偏好的 CSS 數值，但不會小於最小值，也不會大於最大值。
38 · 深入了解
CSS 自訂屬性 CSS Custom Property

CSS 自訂屬性是可重複使用的 CSS 值，也常稱為 CSS 變數。它會遵循串接規則，並能依作用範圍或主題改變。
39 · 核心
CSS 定位 CSS Positioning

CSS 定位用來決定元素要以哪裡為基準。元素可以留在正常流，也能以自己、上層元素或視窗為參考。
40 · 深入了解
CSS 巢狀規則 CSS Nesting

CSS 巢狀規則是把一條樣式規則寫在另一條裡面的原生語法。瀏覽器仍會依 CSS 規範解析選擇器和它們的權重。
41 · 核心
CSS 網格 CSS Grid

CSS Grid 是同時安排橫列和直欄的版面系統，可以定義固定區域，也能隨空間調整。
42 · 核心
CSS 層疊 CSS Cascade

CSS 層疊是瀏覽器用來決定同一元素該套用哪個樣式的一組規則。它會依序比較樣式來源、重要性、封裝情境和層。也會比較選擇器權重、作用域和先後順序。
43 · 核心
CSS 選擇器 CSS Selector

CSS 選擇器是一種用來找出頁面元素的比對規則，找到後就能套用樣式。
44 · 核心
CSS 選擇器權重 CSS Specificity

CSS 選擇器權重是每個選擇器的比較分數。其他層疊條件相同時，瀏覽器會用這個分數決定哪個樣式優先。
45 · 深入了解
CSS 錨點定位 CSS Anchor Positioning

CSS 錨點定位能讓一個容器依照另一個已命名的錨點元素來決定位置。
46 · 核心
CSS 繼承 CSS Inheritance

CSS 繼承是指子元素沒有自己的值時，某些屬性會沿用父元素的計算值。
47 · 核心
CSS 邏輯屬性 CSS Logical Properties

CSS 邏輯屬性會依文字流向描述方向，例如區塊和行內，而不只使用上、右、下、左。這能讓版面跟著語言的書寫方向調整。
48 · 核心
CSS Fixed 定位 Fixed Position

CSS Fixed 定位會讓元素相對固定容器擺放，這個容器通常是瀏覽器視窗。捲動文件時，元素通常會留在原位。
49 · 核心
CSS Sticky 定位 Sticky Position

CSS Sticky 定位一開始會像一般相對定位。捲動時，元素可以停在指定邊緣，但不會超出所屬容器。
50 · 核心
CSS z-index z-index

z-index 是設定定位元素前後圖層的 CSS 屬性。在某些條件下，它也會建立新的局部堆疊脈絡。
51 · 核心
minmax() 網格函式 minmax()

`minmax()` 是 CSS Grid 函式，可同時設定列或欄的最小與最大尺寸。