（轉(zhuǎn)載）原文地址：https://juejin.im/post/5e060afd6fb9a0163b12d46d
前言
要想寫(xiě)出優(yōu)美的CSS作品少欺，想象力固然很重要稠通，然而基礎(chǔ)也是不可忽略的肌括。相信大部分人怕寫(xiě)CSS的原因是被它龐大的基礎(chǔ)知識(shí)體系給嚇到了枫浙，在此筆者推薦一個(gè)叫freecodecamp的網(wǎng)站朦拖，通過(guò)闖關(guān)的方式來(lái)學(xué)習(xí)前端三劍客，用它入門(mén)CSS是最佳的選擇韧拒！
當(dāng)你成功地入了門(mén)之后淹接，便可以開(kāi)始探索CSS的全貌了。本文是CSS屬性的速查表叛溢，配合在線API文檔使用即可
屬性速查表
以下列出的屬性知識(shí)點(diǎn)都是筆者用到過(guò)的
千萬(wàn)不要被數(shù)量嚇到，其實(shí)常用的也就這些：選擇-定位-布局-盒模型-字體-背景-動(dòng)畫(huà)-其他
選擇器
element
元素本身劲适，p
class
類(lèi)楷掉，p.class
id
id，p#id
child
子元素，ul li
attribute
屬性烹植，input[type="checkbox"]
sibling
相鄰元素斑鸦，input ~ label
pseudo class
偽類(lèi)，button:hover
常用偽類(lèi)：
hover：鼠標(biāo)懸浮focus：本身獲得焦點(diǎn)focus-within：本身及子元素獲得焦點(diǎn)nth-child：第n個(gè)子元素not：非某元素target：URL的錨點(diǎn)
表單偽類(lèi)：
checked：?jiǎn)?復(fù)選框開(kāi)關(guān)on的狀態(tài)disabled：被禁用的元素valid：表單校驗(yàn)通過(guò)時(shí)的情況invalid：表單校驗(yàn)不通過(guò)時(shí)的情況placeholder-shown：有占位符時(shí)的情況（也就是用戶還未輸入時(shí)的情況）
pseudo element
偽元素草雕，button::before
常用偽元素：
beforeafter
全選
定位
position
relative：相對(duì)定位巷屿，元素占據(jù)文檔位置，可以有偏移
absolute：絕對(duì)定位墩虹，元素不占位置嘱巾，相對(duì)于父元素定位
fixed：固定在視窗某一位置
sticky：“粘”在視窗某一位置
top | left | bottom | right
上下左右的偏移距離
z-index
層疊關(guān)系
布局
display
block：塊級(jí)元素
inline：內(nèi)聯(lián)元素
flex：彈性盒子布局
grid：網(wǎng)格布局
盒模型
width | height
寬高
padding | margin
內(nèi)外邊距
overflow
visible：超出部分可見(jiàn)
hidden：超出部分不可見(jiàn)
字體
font-weight
字體粗細(xì)
font-size
字體大小
font-family
字體種類(lèi)
line-height
字體行高
文本
text-align
文本對(duì)齊
text-shadow
文本陰影
text-transform
文本大小寫(xiě)
text-decoration
文本裝飾樣式
-webkit-text-stroke
文本描邊
color
文本顏色
opacity
顏色透明度
white-space
空格處理
背景
background-color
背景顏色
background-image
背景圖片
background-size
背景大小
background-position
背景定位
background-repeat
背景是否重復(fù)
background-clip
背景裁剪
邊框
border-width
邊框?qū)挾?/p>
border-style
邊框樣式
border-color
邊框顏色
border-radius
邊框圓角
box-shadow
陰影
濾鏡
filter
作用于元素本身的濾鏡
常用濾鏡：
blur：高斯模糊
contrast：對(duì)比度
drop-shadow：投影
greyscale：灰度
hue-rotate：色調(diào)變換
backdrop-filter
作用于元素背景的濾鏡
混合模式
mix-blend-mode
常用混合模式
multiply：正片疊底
screen：濾色
difference：插值
圖片
object-fit
處理替換元素（如img）的變形問(wèn)題
svg
clip-path
裁剪路徑，用來(lái)裁剪出各種形狀
letter-spacing
字母間距
pointer-events
鼠標(biāo)事件
列表
list-style-type
列表的marker樣式（通常都設(shè)為none）
UI
appearance
元素的默認(rèn)樣式（通常都設(shè)為none）
box-sizing
盒模型類(lèi)型
content-box：默認(rèn)诫钓，標(biāo)準(zhǔn)盒模型
border-box：IE盒模型（將
border和·padding一并算作長(zhǎng)寬）
cursor
光標(biāo)類(lèi)型旬昭，最常用的是pointer，也就是一只手
outline
輪廓
user-select
用戶是否能選擇文本（通常都設(shè)為none）
滾動(dòng)行為
scroll-behavior
auto：默認(rèn)滾動(dòng)行為
smooth：絲滑滾動(dòng)行為
scroll-snap-type
定義在滾動(dòng)容器中的一個(gè)臨時(shí)點(diǎn)（snap point）如何被嚴(yán)格的執(zhí)行
scroll-snap-align
控制將要聚焦的當(dāng)前滾動(dòng)子元素在滾動(dòng)方向上相對(duì)于父容器的對(duì)齊方式
變換
transform
常見(jiàn)的幾何變換：
translate：平移scale：縮放rotate：旋轉(zhuǎn)skew：斜切
transform-origin
變換中心
transform-style
flat：默認(rèn)
preserve-3d：3d場(chǎng)景
perspective
透視距離
backface-visibility
物體后方是否可視
過(guò)渡和動(dòng)畫(huà)
transition
過(guò)渡
transition-property
過(guò)渡屬性名
transition-duration
過(guò)渡時(shí)間
transition-delay
過(guò)渡延遲
transition-timing-function
過(guò)渡時(shí)間函數(shù)
animation
動(dòng)畫(huà)
animation-name
動(dòng)畫(huà)名稱(chēng)
animation-duration
動(dòng)畫(huà)時(shí)間
animation-delay
動(dòng)畫(huà)延遲
animation-timing-function
動(dòng)畫(huà)時(shí)間函數(shù)
animation-iteration-count
動(dòng)畫(huà)播放次數(shù)
animation-fill-mode
動(dòng)畫(huà)填充模式
@keyframes
關(guān)鍵幀
其他
var()
CSS自定義變量
calc()
計(jì)算值
@media
媒體查詢菌湃，用于適配不同設(shè)備
-webkit-box-reflect
投影
原文地址：https://juejin.im/post/5e060afd6fb9a0163b12d46d
