CSS的經常使用屬性速查表

大きな星を摘んだなら、あなたは大きな富を手に入れる。

前言

要想寫出優美的CSS做品，想象力當然很重要，然而基礎也是不可忽略的。相信大部分人怕寫CSS的緣由是被它龐大的基礎知識體系給嚇到了，在此筆者推薦一個叫freecodecamp的網站，經過闖關的方式來學習前端三劍客，用它入門CSS是最佳的選擇！

當你成功地入了門以後，即可以開始探索CSS的全貌了。本文是CSS屬性的速查表，配合在線API文檔使用便可

屬性速查表

如下列出的屬性知識點都是筆者用到過的

千萬不要被數量嚇到，其實經常使用的也就這些：選擇-定位-佈局-盒模型-字體-背景-動畫-其餘

選擇器

element

元素自己，p

class

類，p.class

id

id，p#id

child

子元素，ul li

attribute

屬性，input[type="checkbox"]

sibling

相鄰元素，input ~ label

pseudo class

僞類，button:hover

經常使用僞類：

• hover：鼠標懸浮
• focus：自己得到焦點
• focus-within：自己及子元素得到焦點
• nth-child：第n個子元素
• not：非某元素
• target：URL的錨點

表單僞類：

• checked：單/複選框開關on的狀態
• disabled：被禁用的元素
• valid：表單校驗經過時的狀況
• invalid：表單校驗不經過時的狀況
• placeholder-shown：有佔位符時的狀況（也就是用戶還未輸入時的狀況）

pseudo element

僞元素，button::before

經常使用僞元素：

• before
• after

*

全選

定位

position

• relative：相對定位，元素佔據文檔位置，能夠有偏移
• absolute：絕對定位，元素不佔位置，相對於父元素定位
• fixed：固定在視窗某一位置
• sticky：「粘」在視窗某一位置

top | left | bottom | right

上下左右的偏移距離

z-index

層疊關係

佈局

display

• block：塊級元素
• inline：內聯元素
• flex：彈性盒子佈局
• grid：網格佈局

盒模型

width | height

寬高

padding | margin

內外邊距

overflow

• visible：超出部分可見
• hidden：超出部分不可見

字體

font-weight

字體粗細

font-size

字體大小

font-family

字體種類

line-height

字體行高

文本

text-align

文本對齊

text-shadow

文本陰影

text-transform

文本大小寫

text-decoration

文本裝飾樣式

-webkit-text-stroke

文本描邊

color

文本顏色

opacity

顏色透明度

white-space

空格處理

背景

background-color

背景顏色

background-image

背景圖片

background-size

背景大小

background-position

背景定位

background-repeat

背景是否重複

background-clip

背景裁剪

邊框

border-width

邊框寬度

border-style

邊框樣式

border-color

邊框顏色

border-radius

邊框圓角

box-shadow

陰影

濾鏡

filter

做用於元素自己的濾鏡

經常使用濾鏡：

• blur：高斯模糊
• contrast：對比度
• drop-shadow：投影
• greyscale：灰度
• hue-rotate：色調變換

backdrop-filter

做用於元素背景的濾鏡

混合模式

mix-blend-mode

經常使用混合模式

• multiply：正片疊底
• screen：濾色
• difference：插值

圖片

object-fit

處理替換元素（如img）的變形問題

svg

clip-path

裁剪路徑，用來裁剪出各類形狀

letter-spacing

字母間距

pointer-events

鼠標事件

列表

list-style-type

列表的marker樣式（一般都設爲none）

UI

appearance

元素的默認樣式（一般都設爲none）

box-sizing

盒模型類型

• content-box：默認，標準盒模型
• border-box：IE盒模型（將border和·padding一併算做長寬）

cursor

光標類型，最經常使用的是pointer，也就是一隻手

outline

輪廓

user-select

用戶是否能選擇文本（一般都設爲none）

滾動行爲

scroll-behavior

• auto：默認滾動行爲
• smooth：絲滑滾動行爲

scroll-snap-type

定義在滾動容器中的一個臨時點（snap point）如何被嚴格的執行

scroll-snap-align

控制將要聚焦的當前滾動子元素在滾動方向上相對於父容器的對齊方式

變換

transform

常見的幾何變換：

• translate：平移
• scale：縮放
• rotate：旋轉
• skew：斜切

transform-origin

變換中心

transform-style

• flat：默認
• preserve-3d：3d場景

perspective

透視距離

backface-visibility

物體後方是否可視

過渡和動畫

transition

過渡

transition-property

過渡屬性名

transition-duration

過渡時間

transition-delay

過渡延遲

transition-timing-function

過渡時間函數

animation

動畫

animation-name

動畫名稱

animation-duration

動畫時間

animation-delay

動畫延遲

animation-timing-function

動畫時間函數

animation-iteration-count

動畫播放次數

animation-fill-mode

動畫填充模式

@keyframes

關鍵幀

其餘

var()

CSS自定義變量

calc()

計算值

@media

媒體查詢，用於適配不一樣設備

-webkit-box-reflect

投影