CSS 速查表
一份可搜尋、可列印的 CSS 參考——選擇器、盒模型、flexbox、grid、排版、轉場和現代特性。免費。
Selectors
13.class
Select all elements with the class
#id
Select the element with the id
a, b
Group: select a and b
a b
Descendant: b inside a
a > b
Direct child b of a
a + b
Adjacent sibling immediately after a
a ~ b
General sibling b after a
[type="text"]
Attribute selector
:hover :focus
Pseudo-classes for state
:nth-child(2n)
Every even child
::before ::after
Pseudo-elements (generated content)
:not(.x)
Negation: anything but .x
:is(h1, h2, h3)
Matches any selector in the list
Box model
7box-sizing: border-box;
Include padding & border in width
margin: 0 auto;
Center a block horizontally
padding: 1rem 2rem;
Vertical 1rem, horizontal 2rem
border: 1px solid #ccc;
Width, style, color
border-radius: 8px;
Rounded corners
outline: 2px dashed red;
Outline (does not affect layout)
overflow: hidden;
Clip content that overflows
Flexbox
8display: flex;
Create a flex container
flex-direction: row | column;
Main axis direction
justify-content: space-between;
Align along the main axis
align-items: center;
Align along the cross axis
flex-wrap: wrap;
Allow items to wrap
gap: 1rem;
Space between items
flex: 1;
Grow to fill space (1 1 0)
align-self: flex-end;
Override cross-axis for one item
Grid
8display: grid;
Create a grid container
grid-template-columns: 1fr 1fr 1fr;
Three equal columns
repeat(3, 1fr)
Shorthand for repeated tracks
minmax(200px, 1fr)
Track between a min and max
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
Responsive auto columns
gap: 1rem;
Row and column gap
grid-column: 1 / 3;
Span from line 1 to 3
place-items: center;
Center items on both axes
Typography
8font-family: system-ui, sans-serif;
Font stack
font-size: 1.125rem;
Relative font size
font-weight: 600;
Bold weight
line-height: 1.6;
Line spacing
letter-spacing: .02em;
Tracking
text-align: center;
Horizontal text alignment
text-transform: uppercase;
Change letter case
text-overflow: ellipsis;
Truncate with … (needs overflow+nowrap)
Colors & background
7color: #1f2937;
Text color
background: rgb(0 0 0 / 50%);
Modern rgb with alpha
background: linear-gradient(90deg,#f06,#48f);
Linear gradient
opacity: .5;
Element transparency
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
Drop shadow
background-size: cover;
Scale image to cover
color-mix(in srgb, red 40%, blue);
Mix two colors
Positioning
6position: relative;
Offset from normal position
position: absolute;
Relative to nearest positioned ancestor
position: fixed;
Relative to the viewport
position: sticky; top: 0;
Sticks when scrolling past
inset: 0;
top/right/bottom/left = 0
z-index: 10;
Stacking order
Transitions & animation
5transition: all .2s ease;
Animate property changes
transform: translateY(-4px) scale(1.05);
Move, scale, rotate
@keyframes spin { to { transform: rotate(360deg); } }
Define an animation
animation: spin 1s linear infinite;
Run a keyframe animation
will-change: transform;
Hint the browser to optimize
Responsive & modern
7@media (max-width: 768px) { ... }
Media query breakpoint
clamp(1rem, 2vw, 2rem)
Fluid value with min/max
aspect-ratio: 16 / 9;
Maintain an aspect ratio
var(--brand)
Use a custom property
:root { --brand: #4f46e5; }
Define a custom property
container-type: inline-size;
Enable container queries
@container (min-width: 400px) {…}
Container query
沒有條目符合「:q」。
關於 CSS 速查表
這份 CSS 小抄把每天都會用到的屬性整理在一個可搜尋的頁面中：選擇器、盒模型、flexbox、grid、字體排印、色彩與背景、定位、轉場與動畫，以及一個介紹響應式與現代 CSS 的章節。
內容經過整理，讓「那個屬性叫什麼來著？」這類問題只需搜尋一次即可解答——尤其是 flexbox 與 grid 章節列出了對齊與版面屬性及對應值，可直接複製貼到樣式表中，現代 CSS 章節則收錄較新的功能供隨時查閱。
此小抄免費、於用戶端載入，隨打字即時篩選，並可一鍵複製任何宣告。固定式目錄可在各章節間跳轉，列印按鈕則能產出一份乾淨的紙本參考資料。
如何使用 CSS 速查表
- 瀏覽章節清單——選擇器、盒模型、flexbox、grid、字體排印等等。
- 在搜尋框輸入屬性或概念，例如 grid、hover 或 transition，即可篩選每一列。
- 透過固定式目錄跳到定位等章節。
- 點擊程式碼片段或其複製圖示以複製該 CSS 宣告。
- 列印小抄，作為桌邊的 CSS 參考資料。
常見問題
共九個章節：選擇器、盒模型、flexbox、grid、字體排印、色彩與背景、定位、轉場與動畫，以及響應式與現代 CSS 功能。
有的——兩者都有各自的章節，涵蓋容器與項目屬性、對齊值以及簡寫形式，這些正是開發者最常查閱的內容。
有的。除了歷史悠久的核心內容外，還有專門的響應式與現代 CSS 章節，涵蓋你在當前樣式表中會遇到的較新功能，以及媒體查詢的常見模式。
可以。點擊程式碼或滑鼠停留時出現的複製圖示，該宣告就會進入剪貼簿，並以簡短的「已複製！」訊息確認。
是的，完全免費——這是一個支援即時搜尋、無需登入、可無限次使用的用戶端頁面。
熱門搜尋
css cheat sheet
css selectors list
css flexbox properties
css grid properties
css box model reference
css position values
css transition and animation syntax
css properties reference
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。