✅ 本列表覆盖 CSS1/2/3 主流属性，按功能分类，包含 属性名、说明、常用取值及取值解释。
📚 数据来源：W3C 标准 & MDN Web Docs（截至 2025 年）
一、布局与定位（Layout & Positioning）
| 属性 | 说明 | 常用取值及解释 |
|---|
position | 定义元素的定位方式 | static：默认，文档流中正常排列 relative：相对自身原位置偏移 absolute：脱离文档流，相对于最近定位祖先定位 fixed：相对于视口固定定位 sticky：在滚动到特定阈值时变为 fixed |
top | 定位元素距包含块顶部的距离 | 长度值（10px, 2em）、百分比（5%）、auto |
right | 距右边缘距离 | 同 top |
bottom | 距底边缘距离 | 同 top |
left | 距左边缘距离 | 同 top |
z-index | 控制层叠顺序 | 整数（1, -1, 999），数值越大越在上层；仅对定位元素有效 |
display | 元素显示类型 | block：块级，独占一行 inline：行内，不独占行 inline-block：行内块，可设宽高 flex：弹性容器 grid：网格容器 none：隐藏且不占空间 |
float | 浮动方向 | left：向左浮动 right：向右浮动 none：不浮动（默认） |
clear | 清除浮动影响 | left/right/both：不允许左侧/右侧/两侧有浮动元素 none：无清除 |
visibility | 是否可见 | visible：可见 hidden：隐藏但占空间 collapse：表格中行/列折叠 |
overflow | 溢出处理方式 | visible：溢出可见（默认） hidden：裁剪溢出 scroll：始终显示滚动条 auto：需要时显示滚动条 |
overflow-x | 水平溢出处理 | 同 overflow |
overflow-y | 垂直溢出处理 | 同 overflow |
clip-path | 裁剪元素可视区域 | inset(), circle(), ellipse(), polygon(), url() 或 none |
contain | 渲染性能优化提示 | layout：布局独立 paint：绘制独立 strict：完全隔离（提升性能） |
二、盒模型（Box Model）
| 属性 | 说明 | 常用取值及解释 |
|---|
width | 内容宽度 | 长度、百分比、auto、fit-content、max-content |
min-width | 最小宽度 | 防止内容过窄，常用于响应式 |
max-width | 最大宽度 | 限制宽度，避免过宽（如图片） |
height | 内容高度 | 同 width |
min-height | 最小高度 | 常用于防止容器塌陷 |
max-height | 最大高度 | 限制高度，配合 overflow 使用 |
margin | 外边距（简写） | 10px, 1em, auto（居中常用） 可写 1~4 个值（上右下左） |
margin-top 等 | 单边外边距 | 同 margin |
padding | 内边距（简写） | 同 margin，控制内容与边框距离 |
padding-top 等 | 单边内边距 | 同 padding |
box-sizing | 盒模型计算方式 | content-box：宽高仅含内容（默认） border-box：宽高包含 padding 和 border（推荐） |
border | 边框简写 | 1px solid #000 = width style color |
border-width | 边框宽度 | 1px, thin, medium, thick |
border-style | 边框样式 | solid：实线 dashed：虚线 dotted：点线 double：双线 none：无边框 |
border-color | 边框颜色 | 颜色值（#fff, red, rgba()） |
border-radius | 圆角半径 | 5px, 50%（圆形），可设两个值（水平/垂直） |
border-top-left-radius 等 | 单角圆角 | 分别设置四个角的圆角大小 |
三、背景与边框（Backgrounds & Borders）
| 属性 | 说明 | 常用取值及解释 |
|---|
background | 背景简写 | color image repeat position/size attachment |
background-color | 背景色 | 颜色值，transparent 表示透明 |
background-image | 背景图像 | url("img.jpg"), linear-gradient(...), none |
background-repeat | 背景重复 | repeat：平铺 no-repeat：不重复 repeat-x/repeat-y：单向重复 |
background-attachment | 背景滚动行为 | scroll：随内容滚动（默认） fixed：固定背景（视差滚动） local：随内容滚动，但受 overflow 影响 |
background-position | 背景位置 | center, top left, 50% 50%, 10px 20px |
background-size | 背景尺寸 | cover：覆盖全区域（可能裁剪） contain：完整显示（可能留白） 100% 100%：拉伸填充 |
background-clip | 背景绘制区域 | border-box：绘制到边框 padding-box：不绘制边框区域 content-box：仅内容区 text：仅文字内部（配合 -webkit-text-fill-color: transparent） |
background-origin | 背景定位起点 | padding-box（默认） border-box content-box |
border-image | 图像边框简写 | source slice width outset repeat |
border-image-source | 图像源 | url(), gradient, none |
border-image-slice | 切片方式 | 30%, fill（保留中间内容） |
border-image-width | 图像边框宽度 | 长度、百分比、倍数 |
border-image-outset | 边框超出容器距离 | 长度值 |
border-image-repeat | 图像平铺方式 | stretch, repeat, round, space |
四、文本与字体（Text & Fonts）
| 属性 | 说明 | 常用取值及解释 |
|---|
color | 文本颜色 | 颜色值（#000, rgb(), hsl(), transparent） |
font | 字体简写 | style weight size/line-height family |
font-family | 字体族 | "Arial", "Microsoft YaHei", sans-serif（通用族） |
font-size | 字号 | 16px, 1em, 1rem, small, large |
font-weight | 字重 | normal（400）, bold（700）, 100-900 |
font-style | 字体风格 | normal, italic（斜体）, oblique（倾斜） |
line-height | 行高 | 数字（1.5）、长度、百分比；常用于垂直居中文本 |
text-align | 文本对齐 | left, right, center, justify（两端对齐） |
vertical-align | 垂直对齐 | top, middle, bottom, baseline（默认） |
text-decoration | 装饰线 | none, underline, overline, line-through |
text-indent | 首行缩进 | 2em 常用于段落开头 |
text-overflow | 文本溢出显示 | clip：直接裁剪 ellipsis：显示省略号（需配合 white-space: nowrap 和 overflow: hidden） |
white-space | 空白处理 | normal：合并空白 nowrap：不换行 pre：保留空白和换行 pre-wrap：保留空白，允许换行 pre-line：合并空格，保留换行 |
word-spacing | 字间距 | 2px, 0.1em |
letter-spacing | 字符间距 | 1px, 0.05em |
word-break | 单词断行 | normal, break-all（强制断中文/英文）, keep-all（仅断空格） |
overflow-wrap / word-wrap | 长单词换行 | normal, break-word（允许长单词换行） |
text-shadow | 文本阴影 | h-offset v-offset blur color，如 2px 2px 4px rgba(0,0,0,0.5) |
text-transform | 文本转换 | uppercase, lowercase, capitalize（首字母大写）, none |
direction | 文本方向 | ltr（左到右）, rtl（右到左，用于阿拉伯语等） |
unicode-bidi | 双向文本控制 | 通常与 direction 配合使用，如 bidi-override |
五、弹性布局（Flexbox）
| 属性 | 说明 | 常用取值及解释 |
|---|
flex-direction | 主轴方向 | row（左→右）, row-reverse, column（上→下）, column-reverse |
flex-wrap | 是否换行 | nowrap（默认）, wrap, wrap-reverse |
justify-content | 主轴对齐 | flex-start, flex-end, center, space-between, space-around, space-evenly |
align-items | 交叉轴对齐 | flex-start, flex-end, center, baseline, stretch（拉伸填满） |
align-content | 多行对齐 | flex-start, center, space-between 等（仅多行有效） |
flex-grow | 放大比例 | 0（不放大）, 1（等分剩余空间） |
flex-shrink | 缩小比例 | 1（可缩小）, 0（禁止缩小） |
flex-basis | 初始主轴尺寸 | auto, 200px, 10em |
flex | 三者简写 | flex: 1 = 1 1 0 flex: 0 1 auto（默认） |
order | 排列顺序 | 整数，数值越小越靠前 |
align-self | 单项目对齐 | 覆盖 align-items，取值相同 |
六、网格布局（Grid Layout）
| 属性 | 说明 | 常用取值及解释 |
|---|
grid-template-columns | 定义列 | 100px 1fr, repeat(3, 1fr), minmax(100px, 1fr) |
grid-template-rows | 定义行 | 同上 |
grid-template-areas | 命名区域布局 | "header header" "nav main" "footer footer" |
grid-auto-columns | 隐式列大小 | 自动创建的列的默认尺寸 |
grid-auto-rows | 隐式行大小 | 同上 |
grid-auto-flow | 自动填充方向 | row（先行后列）, column, dense（致密填充） |
gap | 网格间距 | 10px, 1em 2em（行 1em，列 2em） |
grid-column-start | 起始列线 | 1, span 2, end |
grid-column-end | 结束列线 | 同上 |
grid-column | 列简写 | 1 / 3 或 span 2 |
grid-row-start | 起始行线 | 同列 |
grid-row-end | 结束行线 | 同列 |
grid-row | 行简写 | 同 grid-column |
grid-area | 区域命名或定位 | header, 1 / 1 / 3 / 2（行起/列起/行止/列止） |
七、变换、过渡与动画
✅ 变换（Transform）
| 属性 | 说明 | 常用取值及解释 |
|---|
transform | 应用变换 | translate(10px, 5px) rotate(45deg) scale(1.2) skew(10deg) 可组合：translateX(10px) rotate(30deg) |
transform-origin | 变换中心点 | center, top left, 50% 50%, 10px 20px |
transform-style | 子元素 3D 空间 | flat（扁平）, preserve-3d（保留 3D） |
perspective | 3D 透视距离 | 500px, 1000px（值越小透视感越强） |
perspective-origin | 透视原点 | 同 transform-origin |
backface-visibility | 背面是否可见 | visible, hidden（翻转时隐藏背面） |
✅ 过渡（Transition）
| 属性 | 说明 | 常用取值及解释 |
|---|
transition | 过渡简写 | property duration timing-function delay 例：all 0.3s ease-in-out 0.1s |
transition-property | 参与过渡的属性 | width, opacity, transform, all |
transition-duration | 持续时间 | 0.2s, 500ms |
transition-timing-function | 缓动函数 | ease, linear, ease-in, ease-out, cubic-bezier(0.42, 0, 0.58, 1) |
transition-delay | 延迟时间 | 0.1s, 500ms |
✅ 动画（Animation）
| 属性 | 说明 | 常用取值及解释 |
|---|
animation | 动画简写 | name duration timing-function delay iteration-direction fill-mode play-state |
animation-name | @keyframes 名称 | fade, slideIn, spin |
animation-duration | 动画时长 | 1s, 300ms |
animation-timing-function | 缓动函数 | 同 transition-timing-function |
animation-delay | 延迟启动 | 0.5s |
animation-iteration-count | 播放次数 | 1, infinite（无限循环） |
animation-direction | 播放方向 | normal, reverse, alternate（来回播放）, alternate-reverse |
animation-play-state | 播放状态 | running, paused（可用于悬停暂停） |
animation-fill-mode | 动画外状态 | none, forwards（停在最后一帧）, backwards, both |
八、滤镜与视觉效果
| 属性 | 说明 | 常用取值及解释 |
|---|
filter | 视觉滤镜 | blur(2px), brightness(1.2), contrast(150%), drop-shadow(2px 2px 4px black) grayscale(100%), hue-rotate(90deg), invert(1) |
backdrop-filter | 背景滤镜 | blur(10px) 实现毛玻璃效果，常用于模态框、导航栏 |
九、用户界面
| 属性 | 说明 | 常用取值及解释 |
|---|
cursor | 鼠标样式 | pointer（手型）, move, not-allowed, zoom-in, text, wait |
resize | 是否可调整大小 | none, both, horizontal, vertical（常用于 textarea） |
user-select | 是否可选中文本 | none（禁止选择）, text, all, auto |
pointer-events | 是否响应鼠标事件 | auto（正常）, none（穿透点击） |
caret-color | 输入光标颜色 | red, #00ff00, transparent |
十、多列布局
| 属性 | 说明 | 常用取值及解释 |
|---|
columns | 列数与宽度 | 3 200px = 3列，每列约200px |
column-count | 列数 | 2, 3 |
column-width | 每列宽度 | 150px, auto |
column-gap | 列间距 | 20px, 1em |
column-rule | 列间线 | 1px solid #ddd |
column-span | 跨列 | none, all（如标题跨所有列） |
十一、其他重要属性
| 属性 | 说明 | 常用取值及解释 |
|---|
aspect-ratio | 宽高比 | 16 / 9, 1 / 1（保持比例，响应式推荐） |
--* | 自定义属性（CSS 变量） | --main-color: #007bff;，使用 var(--main-color) |
env() | 环境变量 | env(safe-area-inset-top) 用于适配 iPhone 刘海屏 |
✅ 使用建议：
- 初学者重点掌握：盒模型、文本、display、position、flex、transition、transform
- 响应式设计必学：flex、grid、media queries、aspect-ratio
- 动效设计必学：transition + transform、animation、keyframes
