CSS 速查表
一份可搜尋、可列印的 CSS 參考——選擇器、盒模型、flexbox、grid、排版、轉場和現代特性。免費。
選擇器
13.class
選取具該類別的所有元素
#id
選取具該 id 的元素
a, b
群組：選取 a 與 b
a b
後代：a 內的 b
a > b
a 的直接子元素 b
a + b
緊接在 a 之後的相鄰同層
a ~ b
a 之後的一般同層 b
[type="text"]
屬性選擇器
:hover :focus
表示狀態的偽類別
:nth-child(2n)
每個偶數子元素
::before ::after
偽元素（產生的內容）
:not(.x)
否定：除了 .x 以外
:is(h1, h2, h3)
比對清單中任一選擇器
盒模型
7box-sizing: border-box;
將內距與邊框納入寬度
margin: 0 auto;
將區塊水平置中
padding: 1rem 2rem;
垂直 1rem、水平 2rem
border: 1px solid #ccc;
寬度、樣式、顏色
border-radius: 8px;
圓角
outline: 2px dashed red;
外框線（不影響版面）
overflow: hidden;
裁切溢位的內容
Flexbox
8display: flex;
建立 flex 容器
flex-direction: row | column;
主軸方向
justify-content: space-between;
沿主軸對齊
align-items: center;
沿交叉軸對齊
flex-wrap: wrap;
允許項目換行
gap: 1rem;
項目之間的間距
flex: 1;
擴展以填滿空間（1 1 0）
align-self: flex-end;
為單一項目覆寫交叉軸
Grid
8display: grid;
建立 grid 容器
grid-template-columns: 1fr 1fr 1fr;
三個等寬欄
repeat(3, 1fr)
重複軌道的簡寫
minmax(200px, 1fr)
介於最小與最大之間的軌道
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
響應式自動欄
gap: 1rem;
列與欄的間距
grid-column: 1 / 3;
從線 1 跨至線 3
place-items: center;
在兩軸上置中項目
字體排印
8font-family: system-ui, sans-serif;
字型堆疊
font-size: 1.125rem;
相對字型大小
font-weight: 600;
粗體字重
line-height: 1.6;
行距
letter-spacing: .02em;
字距
text-align: center;
文字水平對齊
text-transform: uppercase;
變更字母大小寫
text-overflow: ellipsis;
以 … 截斷（需 overflow+nowrap）
顏色與背景
7color: #1f2937;
文字顏色
background: rgb(0 0 0 / 50%);
含 alpha 的現代 rgb
background: linear-gradient(90deg,#f06,#48f);
線性漸層
opacity: .5;
元素透明度
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
投影
background-size: cover;
縮放圖片以填滿
color-mix(in srgb, red 40%, blue);
混合兩種顏色
定位
6position: relative;
相對於正常位置的偏移
position: absolute;
相對於最近的已定位祖先
position: fixed;
相對於視口
position: sticky; top: 0;
捲動超過時固定
inset: 0;
top/right/bottom/left = 0
z-index: 10;
堆疊順序
轉場與動畫
5transition: all .2s ease;
為屬性變化加上動畫
transform: translateY(-4px) scale(1.05);
移動、縮放、旋轉
@keyframes spin { to { transform: rotate(360deg); } }
定義動畫
animation: spin 1s linear infinite;
執行關鍵影格動畫
will-change: transform;
提示瀏覽器進行最佳化
響應式與現代特性
7@media (max-width: 768px) { ... }
媒體查詢斷點
clamp(1rem, 2vw, 2rem)
含 min/max 的流體值
aspect-ratio: 16 / 9;
維持長寬比
var(--brand)
使用自訂屬性
:root { --brand: #4f46e5; }
定義自訂屬性
container-type: inline-size;
啟用容器查詢
@container (min-width: 400px) {…}
容器查詢
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。