CSS的經常使用屬性速查表

（轉載）原文地址：http://www.javashuo.com/article/p-athwxmfx-g.html
前言

要想寫出優美的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

投影

（轉載）原文地址：http://www.javashuo.com/article/p-athwxmfx-g.html

END