要想寫出優美的css作品，想象力固然很重要，然而基礎也是不可忽略的。相信大部分人怕寫css的原因是被它龐大的基礎知識體系給嚇到了，在此筆者推薦乙個叫freecodecamp的**，通過闖關的方式來學習前端三劍客，用它入門css是最佳的選擇！
以下列出的屬性知識點都是筆者用到過的
千萬不要被數量嚇到，其實常用的也就這些：選擇-定位-布局-盒模型-字型-背景-動畫-其他
元素本身，p
類，p.class
id，p#id
子元素，ul li
屬性，input[type="checkbox"]
相鄰元素，input ~ label
偽類，button:hover
常用偽類：
表單偽類：
偽元素，button::before
常用偽元素：
上下左右的偏移距離
層疊關係
字型粗細
字型大小
字型種類
字型行高
文字對齊
文字陰影
文字大小寫
文字裝飾樣式
文字描邊
文字顏色
顏色透明度
空格處理
背景顏色
背景背景大小
背景定位
背景是否重複
背景裁剪
邊框寬度
邊框樣式
邊框顏色
邊框圓角
陰影作用於元素本身的濾鏡
常用濾鏡：
作用於元素背景的濾鏡
常用混合模式
處理替換元素（如img）的變形問題
裁剪路徑，用來裁剪出各種形狀
字母間距
滑鼠事件
列表的marker樣式（通常都設為none）
元素的預設樣式（通常都設為none）
盒模型型別
游標型別，最常用的是pointer，也就是乙隻手
輪廓使用者是否能選擇文字（通常都設為none）
定義在滾動容器中的乙個臨時點（snap point）如何被嚴格的執行
控制將要聚焦的當前滾動子元素在滾動方向上相對于父容器的對齊方式
常見的幾何變換：
變換中心
透視距離
物體後方是否可視
過渡過渡屬性名
過渡時間
過渡延遲
過渡時間函式
動畫動畫名稱
動畫時間
動畫延遲
動畫時間函式
動畫填充模式
關鍵幀css自定義變數
計算值**查詢，用於適配不同裝置
投影
CSS屬性速查表
本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案 布局類1 定位 position z index topbottom left right2 浮動 float clear3 多列布局 columns col...
CSS屬性速查表
本文將按照布局類屬性 盒模型屬性 文字類屬性 修飾類屬性這四個分類，對css常用屬性進行重新排列，並最終設定為乙份stylelintrc檔案 1 定位 position z index topbottom left right 2 浮動 float clear 3 多列布局 columns colu...
flex布局屬性速查表
box display flex 任何乙個容器都可以指定為flex布局。注意，設為flex布局以後，子元素的float clear和vertical align屬性將失效。box display inline flex 行內元素也可以使用flex布局。box display webkit flex ...