前言
要想寫出優美的CSS作品，想像力固然很重要，然而基礎也是不可忽略的。相信大部分人怕寫CSS的原因是被它龐大的基礎知識體系給嚇到了，在此筆者推薦一個叫freecodecamp的網站，通過闖關的方式來學習前端三劍客，用它入門CSS是最佳的選擇！
當你成功地入了門之後，便可以開始探索CSS的全貌了。本文是CSS屬性的速查表，配合在線API文檔使用即可
我自己是一名從事了多年開發的web前端老程式設計師，目前辭職在做自己的web前端私人定製課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習乾貨，各種框架都有整理，送給每一位前端小夥伴，想要獲取的可以關注我的頭條號並在後台私信我：前端，即可免費獲取。
屬性速查表
以下列出的屬性知識點都是筆者用到過的
千萬不要被數量嚇到，其實常用的也就這些：選擇-定位-布局-盒模型-字體-背景-動畫-其他
選擇器
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
投影
作者：alphardex
連結：https://juejin.im/post/5e060afd6fb9a0163b12d46d