响应式设计 - 单位

单位	说明	参考基准
px	像素	绝对单位
em	相对单位	父元素font-size
rem	相对单位	根元素font-size
%	百分比	父元素对应属性
vw	视口宽度	1vw = 1%视口宽度
vh	视口高度	1vh = 1%视口高度
vmin/vmax	视口极值	vw和vh中较小/较大者

媒体查询 @media

特性	说明	示例
min-width	最小宽度（及以上）	@media (min-width: 768px)
max-width	最大宽度（及以下）	@media (max-width: 1200px)
orientation	屏幕方向	@media (orientation: portrait)
prefers-color-scheme	颜色主题偏好	@media (prefers-color-scheme: dark)
prefers-reduced-motion	减少动画偏好	@media (prefers-reduced-motion: reduce)

CSS3 颜色

颜色模式	说明	示例
颜色名称	预定义颜色名	red, blue, transparent
十六进制	#RRGGBB或#RGB格式	#ff0000, #f00
RGB/rgba	红绿蓝+透明度	rgb(255, 0, 0), rgba(255,0,0,0.5)
HSL/hsla	色相饱和度亮度	hsl(0, 100%, 50%)
LCH/OKLCH	设备无关颜色	oklch(0.7 0.2 280)

背景与渐变

属性	说明	示例
background-image	设置背景图像	background-image: url(bg.jpg)
background-size	背景尺寸	cover, contain, 100px 200px
background-position	背景位置	center, top left, 50% 50%
linear-gradient()	线性渐变	linear-gradient(to right, red, blue)
radial-gradient()	径向渐变	radial-gradient(circle, red, blue)
conic-gradient()	圆锥渐变	conic-gradient(red, yellow, green)

过渡与动画

属性	说明	值
transition	过渡效果简写	all 0.3s ease
transition	transition-property	应用过渡的属性 all, transform, opacity
transition	transition-duration	过渡时长 0.3s, 300ms
transition	transition-timing-function	缓动函数 ease, linear, ease-in-out
animation	动画简写	slideIn 0.5s ease
animation	animation-name	关键帧名称 slideIn
animation	animation-duration	动画时长 1s, 0.5s
animation	animation-iteration-count	播放次数 1, 2, infinite

transform 变换

函数	说明	示例
translate(x, y)	位移	translate(100px, 50px)
rotate(angle)	旋转	rotate(45deg)
scale(x, y)	缩放	scale(1.5), scale(1, 2)
skew(x, y)	倾斜	skew(10deg, 20deg)
matrix(a, b, c, d, e, f)	矩阵变换	matrix(1, 0, 0, 1, 30, 30)
transform-origin	变换原点	center, 50% 50%

CSS 变量与最新特性

特性	说明	示例
CSS变量	自定义属性，--变量名定义	--primary-color: #2563eb;
var()函数	使用CSS变量	color: var(--primary-color)
@property	注册自定义属性类型	@property --size { type: length; }
@container	容器查询	@container (min-width: 400px)
:has()	父选择器	.card:has(.highlight)
nesting	原生CSS嵌套	.parent { .child { } }