前言：CSS 的“参数”到底是什么
CSS 里没有函数参数，但有 属性（Property）——每一个属性就是一条“参数”，格式永远是 属性名: 值;。掌握 CSS 的本质，就是掌握“有哪些属性、各自能填什么值”。本文按功能分类，把 CSS 的所有常用属性（约 120 个）整理成速查表，附常用值与示例。
说明：CSS 规范持续演进，本文覆盖实战中 95% 的属性；完整权威清单以 MDN（developer.mozilla.org）为准。
图 1：CSS 属性家族九大分类——学 CSS 先建分类框架，比死记属性高效十倍
一、文字与排版（最常用的一组）
| 属性 |
作用 |
常用值示例 |
| font-family |
字体族 |
Arial, “Microsoft YaHei”, sans-serif |
| font-size |
字号 |
16px / 1.2rem / 100% |
| font-weight |
字重 |
normal / bold / 100~900 |
| font-style |
斜体 |
normal / italic / oblique |
| line-height |
行高 |
1.6（倍数）/ 24px |
| letter-spacing |
字间距 |
1px / 0.05em |
| word-spacing |
词间距 |
4px |
| text-align |
水平对齐 |
left / center / right / justify |
| text-decoration |
修饰线 |
none / underline / line-through |
| text-transform |
大小写 |
uppercase / lowercase / capitalize |
| text-indent |
首行缩进 |
2em |
| text-shadow |
文字阴影 |
2px 2px 4px rgba(0,0,0,0.3) |
| white-space |
空白处理 |
nowrap / pre / pre-wrap |
| word-break |
换行规则 |
break-all / keep-all |
| color |
文字颜色 |
#333 / rgb(51,51,51) / red |
| vertical-align |
行内垂直对齐 |
middle / top / baseline |
二、盒模型与尺寸
| 属性 |
作用 |
常用值示例 |
| width / height |
宽/高 |
200px / 50% / auto |
| min-width / max-width |
最小/最大宽 |
min-width: 320px; max-width: 1200px |
| box-sizing |
宽度的计算方式 |
content-box（默认）/ border-box（推荐） |
| padding |
内边距（可拆 padding-top 等） |
10px 20px（上下 左右） |
| margin |
外边距（可拆 margin-left 等） |
0 auto（水平居中） |
| border |
边框（宽 样式 颜色） |
1px solid #eee |
| border-radius |
圆角 |
8px / 50%（圆形） |
| outline |
轮廓（不占空间） |
2px solid #5f9e82 |
| overflow |
内容溢出处理 |
visible / hidden / auto / scroll |
三、背景与渐变
| 属性 |
作用 |
常用值示例 |
| background-color |
背景色 |
#f5f5f5 / transparent |
| background-image |
背景图 |
url(bg.png) / linear-gradient(…) |
| background-size |
背景图尺寸 |
cover / contain / 100% 100% |
| background-position |
背景图位置 |
center / top left |
| background-repeat |
平铺方式 |
no-repeat / repeat-x |
| background-attachment |
背景是否随滚动 |
scroll / fixed |
| linear-gradient() |
线性渐变（函数值） |
linear-gradient(90deg, #5f9e82, #c8f0d2) |
| radial-gradient() |
径向渐变 |
radial-gradient(circle, #fff, #eee) |
四、布局（最核心的一组）
4.1 基础布局
| 属性 |
作用 |
常用值示例 |
| display |
显示模式（布局总开关） |
block / inline / inline-block / flex / grid / none |
| position |
定位方式 |
static / relative / absolute / fixed / sticky |
| top / right / bottom / left |
定位偏移 |
10px / 50% / 0 |
| z-index |
层叠顺序 |
1 / 999 / -1（配合定位使用） |
| float / clear |
浮动（旧布局方式） |
left / right / both |
| visibility |
可见性 |
visible / hidden |
4.2 Flexbox（一维布局）
| 属性 |
作用 |
常用值示例 |
| flex-direction |
主轴方向 |
row / column / row-reverse |
| flex-wrap |
是否换行 |
nowrap / wrap |
| justify-content |
主轴对齐 |
center / space-between / space-around / flex-end |
| align-items |
交叉轴对齐 |
center / stretch / flex-start / baseline |
| align-content |
多行整体对齐 |
center / space-between（flex-wrap 生效时） |
| gap |
子元素间距 |
16px / 10px 20px |
| flex |
子元素伸缩简写 |
1 / 0 0 auto / 1 1 200px |
| flex-grow / flex-shrink |
放大/缩小比例 |
1 / 0 |
| flex-basis |
基准尺寸 |
200px / auto |
| order |
子元素排列顺序 |
-1 / 0 / 2 |
| align-self |
单个子元素交叉轴对齐 |
center / flex-end（覆盖 align-items） |
4.3 Grid（二维布局）
| 属性 |
作用 |
常用值示例 |
| grid-template-columns |
列定义 |
1fr 2fr / repeat(3, 1fr) / 200px 1fr |
| grid-template-rows |
行定义 |
auto 1fr / 100px |
| grid-gap（gap） |
行列间距 |
20px |
| grid-column / grid-row |
子元素跨列/行 |
1 / 3（跨 1 到 3 列） |
| justify-items / align-items |
单元格内对齐 |
center / stretch |
五、视觉效果
| 属性 |
作用 |
常用值示例 |
| box-shadow |
盒子阴影 |
0 2px 8px rgba(0,0,0,0.1) |
| opacity |
透明度 |
0（全透明）~ 1（不透明） |
| filter |
滤镜 |
blur(4px) / brightness(0.8) / grayscale(1) / drop-shadow(…) |
| transform |
变形 |
translate(10px, 20px) / scale(1.1) / rotate(45deg) |
| transform-origin |
变形原点 |
center / top left |
| mix-blend-mode |
混合模式 |
multiply / screen / overlay |
六、过渡与动画
| 属性 |
作用 |
常用值示例 |
| transition |
过渡简写 |
all 0.3s ease / opacity 0.2s linear |
| transition-property |
过渡的属性 |
transform, opacity |
| transition-duration |
过渡时长 |
0.3s / 300ms |
| transition-timing-function |
过渡节奏 |
ease / linear / ease-in-out / cubic-bezier(…) |
| animation |
动画简写 |
fadeIn 0.6s ease forwards |
| animation-iteration-count |
播放次数 |
infinite / 3 |
| animation-direction |
方向 |
normal / reverse / alternate |
| animation-fill-mode |
结束状态保持 |
forwards / backwards / both |
| animation-play-state |
播放/暂停 |
running / paused（悬停暂停） |
七、其他实用属性
| 属性 |
作用 |
常用值示例 |
| cursor |
鼠标指针 |
pointer / move / not-allowed / grab |
| user-select |
是否可选中文字 |
none / text（按钮防误选） |
| pointer-events |
是否响应鼠标 |
none（穿透） |
| object-fit |
图片/视频裁剪方式 |
cover / contain（配合 width/height 用） |
| appearance |
原生控件外观 |
none（去掉 select 默认箭头） |
| resize |
是否可拖拽调整 |
both / none |
| scroll-behavior |
滚动行为 |
smooth（锚点平滑滚动） |
| writing-mode |
文字方向 |
horizontal-tb / vertical-rl（竖排） |
| content |
伪元素内容 |
“→ ” / attr(data-x) / url(icon.png) |
八、单位汇总（属性的“值”都靠它们）
| 单位 |
含义 |
典型用途 |
| px |
像素（固定） |
边框、细线、小间距 |
| em |
相对父元素字号 |
按钮内边距（随字号缩放） |
| rem |
相对根元素字号 |
全局字号、间距（推荐） |
| % |
相对父容器 |
宽度、高度 |
| vw / vh |
相对视口宽/高 |
全屏区（100vh） |
| vmin / vmax |
视口较小/较大边 |
响应式大字 |
| ch |
字符 0 的宽度 |
等宽排版 |
| fr |
Grid 剩余空间份数 |
1fr 2fr |
| s / ms |
秒 / 毫秒 |
过渡动画时长 |
| deg / turn |
角度 |
rotate(45deg) |
| 颜色 |
hex / rgb / hsl / 关键字 |
#fff / rgb(0,0,0) / hsl(150,26%,50%) / red |
九、@ 规则（不是属性，但必须认识）
| @规则 |
作用 |
示例 |
| @media |
响应式断点 |
@media (min-width: 768px) { … } |
| @keyframes |
定义动画帧 |
@keyframes fadeIn { from{…} to{…} } |
| @font-face |
引入自定义字体 |
@font-face { font-family: “X”; src: url(x.woff2); } |
| @import |
引入其他 CSS |
@import url(other.css); |
| @supports |
特性检测 |
@supports (display: grid) { … } |
结语：怎么用这份速查表
- 先背下高频组：字体组（一）、盒模型组（二）、布局组（四）——这三组能解决 80% 的日常需求
- 遇到没见过的属性，查 MDN：搜“MDN + 属性名”，看 Values 部分（哪些值合法）
- 不确定浏览器是否支持，查 Can I Use（caniuse.com）
- 把这份表收藏起来当字典用，写样式时对照着查，比背下来高效
贵公网安备 52260102556631号