| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| * / 元素 / .类 / #ID | * | 通用选择器匹配所有元素；元素选择器如 p；.box 匹配 class；#box 匹配 id | *{margin:0} p{line-height:1.6} .box{} #header{} |
| 属性选择器 | [attr] [attr=v] [attr^=v] [attr$=v] [attr*=v] | 匹配含有某属性、等于、以 v 开头、结尾或包含 v 的元素 | a[href^="https"]{color:#2f81f7} |
| 后代 / 子代选择器 | A B / A > B | 空格为后代（任意层级）；> 为直接子元素 | nav a{} ul > li{} |
| 相邻 / 通用兄弟 | A + B / A ~ B | + 紧邻的下一个兄弟；~ 后面所有同级兄弟 | h1 + p{} .item ~ .item{} |
| 分组选择器 | A, B | 逗号分组，共享同一规则块 | h1,h2,h3{font-weight:700} |
| :is() :where() :where() | :is(a,b) :where(a,b) | 匹配列表中任一选择器；:where() 优先级恒为 0，:is() 取列表最高 | :is(h1,h2){} :where(.a,.b){} |
| :has() | A:has(B) | 父选择器：匹配包含指定后代的 A | div:has(> img){padding:0} |
| *组合 与 优先级 | 选择器组合 | 优先级：内联 > ID > 类/属性/伪类 > 元素/伪元素；同权重按书写顺序层叠 | #nav .link:hover{color:red} |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| width / height | width: <长度|%|auto> | 设置内容区宽高；auto 由内容或父级决定 | width:120px; height:80px |
| min-width / max-width | min-width: <长度|%> | 限制元素的最小/最大尺寸，常用于响应式防挤压 | max-width:960px |
| box-sizing | content-box | border-box | border-box 让 width 包含 padding 与 border，布局更可控 | *,*::before,*::after{box-sizing:border-box} |
| margin | margin: <上> <右> <下> <左> | 外边距；auto 可实现块级水平居中；相邻 margin 会折叠 | margin:0 auto; margin-bottom:16px |
| padding | padding: <上右下左> | 内边距，撑大元素内部留白，不含负值 | padding:12px 16px |
| border | border: <宽> <样式> <颜色> | 简写边框；样式有 solid/dashed/dotted/double/none | border:1px solid #2d3748 |
| border-radius | border-radius: <半径> | 圆角；写四个值对应左上/右上/右下/左下；50% 为圆形 | border-radius:8px; border-radius:50% |
| outline | outline: <宽> <样式> <颜色> | 描边，不占布局空间，常用于无障碍聚焦态 | :focus-visible{outline:2px solid #4a9eff} |
| box-shadow | box-shadow: x y 模糊 扩散 颜色 inset | 投影；逗号可叠加多层阴影 | box-shadow:0 4px 12px rgba(0,0,0,.3) |
| overflow | visible | hidden | auto | scroll | 内容溢出处理；overflow-x / overflow-y 分轴控制 | overflow:auto |
| display | block | inline | flex | grid | none | 决定元素的显示模式与布局上下文 | display:flex |
| visibility | visible | hidden | collapse | 隐藏元素但保留占位；display:none 不保留 | visibility:hidden |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| flex-direction | row | row-reverse | column | column-reverse | 主轴方向；row 为默认水平 | flex-direction:column |
| flex-wrap | nowrap | wrap | wrap-reverse | 是否换行；nowrap 默认强制单行可能溢出 | flex-wrap:wrap |
| flex-flow | flex-flow: <direction> <wrap> | direction 与 wrap 的简写 | flex-flow:row wrap |
| justify-content | flex-start | center | flex-end | space-between | space-around | space-evenly | 主轴对齐与间距分布 | justify-content:center |
| align-items | stretch | flex-start | center | flex-end | baseline | 交叉轴对齐方式 | align-items:center |
| align-content | flex-start | center | stretch | space-between | 多行时交叉轴整体对齐 | align-content:space-between |
| align-self | auto | flex-start | center | ... | 覆盖父级 align-items，单个项目对齐 | .item{align-self:flex-end} |
| flex | flex: <grow> <shrink> <basis> | flex:1 表示剩余空间等比分配 | .main{flex:1} |
| flex-grow / flex-shrink | flex-grow: <数字> | 剩余空间放大比例 / 空间不足收缩比例 | flex-grow:2 |
| gap | gap: <行间距 列间距> | Flex/Grid 项目间距，替代 margin 方案 | gap:12px 8px |
| order | order: <整数> | 调整项目排列顺序，默认 0；越小越靠前 | order:-1 |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| grid-template-columns | grid-template-columns: <轨道列表> | 定义列轨道；repeat() 与 fr 单位常用 | grid-template-columns:repeat(3,1fr) |
| grid-template-rows | grid-template-rows: <轨道列表> | 定义行轨道 | grid-template-rows:auto 1fr |
| grid-template-areas | grid-template-areas: "a b" | 命名网格区域，配合 grid-area 使用 | grid-template-areas:"hd hd" "sd mn" |
| grid-area | grid-area: <区域名> | 把项目放到命名区域 | .hd{grid-area:hd} |
| grid-column / grid-row | grid-column: <起>/<止> | 跨列/跨行：起止线编号，span n 表示跨 n 格 | grid-column:1/3 或 span 2 |
| gap / column-gap | gap: <行 列> | 网格行列间距，同 Flex | gap:16px |
| justify-items / align-items | start | center | end | stretch | 单元格内容在各自格内的对齐 | justify-items:center |
| place-items | place-items: <align> <justify> | align-items 与 justify-items 简写 | place-items:center |
| justify-content (grid) | start | center | space-between | 整个网格在容器内的主轴对齐（轨道小于容器时） | justify-content:center |
| grid-auto-flow | row | column | dense | 隐式项目的排列方向；dense 启用密集填充 | grid-auto-flow:dense |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| position | static | relative | absolute | fixed | sticky | relative 相对自身；absolute 相对最近定位祖先；fixed 相对视口；sticky 滚动吸附 | position:sticky; top:0 |
| top / right / bottom / left | top: <长度|%|auto> | 配合非 static 定位使用，设置偏移量 | position:absolute; top:10px; left:20px |
| z-index | z-index: <整数> | 层叠顺序，仅对定位元素生效；需在同一层叠上下文中比较 | z-index:100 |
| inset | inset: <上 右 下 左> | top/right/bottom/left 简写 | inset:0 |
| float | left | right | none | 元素浮动，文本可环绕；现代布局多用 Flex/Grid 替代 | float:left |
| clear | left | right | both | 清除浮动影响 | clear:both |
| object-fit | fill | contain | cover | none | 替换元素（img/video）内容如何填充盒子 | img{width:100%; object-fit:cover} |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| font-family | font-family: <字体栈> | 字体回落栈，含中文字体与英文等宽字体 | font-family:var(--mono) |
| font-size | font-size: <长度> | 字号；建议使用 rem 单位做缩放 | font-size:14px |
| font-weight | normal | bold | 100-900 | 字重；400=normal，700=bold；可变字体支持任意值 | font-weight:600 |
| font-style | normal | italic | oblique | 字体样式：斜体 | font-style:italic |
| line-height | line-height: <数字|长度> | 行高；无单位数字按字号倍数继承 | line-height:1.75 |
| letter-spacing | letter-spacing: <长度> | 字符间距 | letter-spacing:.05em |
| word-spacing | word-spacing: <长度> | 单词间距（对英文有效） | word-spacing:2px |
| text-align | left | center | right | justify | 文本水平对齐 | text-align:center |
| vertical-align | baseline | top | middle | bottom | 行内元素与表格单元格垂直对齐 | vertical-align:middle |
| text-decoration | text-decoration: <line> <style> <color> | 下划线/删除线；none 常用于去除链接默认样式 | text-decoration:none |
| text-indent | text-indent: <长度> | 首行缩进 | text-indent:2em |
| text-overflow | clip | ellipsis | 配合 overflow:hidden 与 white-space:nowrap 实现单行省略号 | white-space:nowrap; overflow:hidden; text-overflow:ellipsis |
| text-transform | none | uppercase | lowercase | capitalize | 文本大小写转换 | text-transform:uppercase |
| white-space | normal | nowrap | pre | pre-wrap | 空白与换行处理；pre-wrap 保留换行且自动折行 | white-space:pre-wrap |
| word-break | normal | break-all | keep-all | 长单词/URL 换行规则；break-all 强制断行 | word-break:break-all |
| color | color: <颜色值> | 文本颜色；支持 命名颜色/HEX/rgb()/hsl()/currentcolor | color:var(--text2) |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| background | background: <color> <image> <repeat> <position>/<size> | 简写，可同时定义多层背景 | background:#fff url(bg.png) no-repeat center/cover |
| background-color | background-color: <颜色> | 背景色 | background-color:#161b22 |
| background-image | background-image: url(...) | linear-gradient() | radial-gradient() | 背景图或渐变，逗号叠加多层 | background-image:linear-gradient(#2f81f7,#a371f7) |
| background-size | auto | cover | contain | <长度> | cover 填满裁切，contain 完整留白 | background-size:cover |
| background-position | <关键字> | <坐标> | 背景图位置 | background-position:center top |
| background-repeat | repeat | no-repeat | repeat-x | repeat-y | 背景平铺方式 | background-repeat:no-repeat |
| background-clip | border-box | padding-box | content-box | 背景绘制范围；text 可做文字渐变 | background-clip:text |
| background-attachment | scroll | fixed | local | 背景随滚动固定的视差效果 | background-attachment:fixed |
| border-style | none | solid | dashed | dotted | double | 边框样式，必填项才能显示边框 | border-style:solid |
| border-collapse | collapse | separate | 表格边框合并 | table{border-collapse:collapse} |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| transition | transition: <属性> <时长> <缓动> <延迟> | 状态变化的补间动画；all 表示全部属性 | transition:all .25s ease |
| transition-property | transition-property: <属性列表> | 指定参与过渡的属性 | transition-property:color,background |
| transition-duration | transition-duration: <时间> | 过渡时长，如 .3s | transition-duration:.3s |
| transition-timing-function | linear | ease | ease-in-out | cubic-bezier() | steps() | 缓动曲线 | transition-timing-function:cubic-bezier(.4,0,.2,1) |
| transition-delay | transition-delay: <时间> | 延迟开始过渡 | transition-delay:.1s |
| @keyframes | @keyframes <name> { from{} to{} } | 定义关键帧动画 | @keyframes spin{to{transform:rotate(360deg)}} |
| animation | animation: <name> <时长> <缓动> <次数> <填充> | 动画简写 | animation:spin 1s linear infinite |
| animation-iteration-count | <整数> | infinite | 动画播放次数 | animation-iteration-count:infinite |
| animation-direction | normal | reverse | alternate | 播放方向；alternate 交替往返 | animation-direction:alternate |
| animation-fill-mode | none | forwards | backwards | both | 动画停留/起始帧状态；forwards 停在最后一帧 | animation-fill-mode:forwards |
| animation-play-state | running | paused | 控制动画播放与暂停 | animation-play-state:paused |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| transform | transform: <函数列表> | 对元素变形：平移/旋转/缩放/倾斜，不影响布局 | transform:translate(-50%,-50%) |
| translate() | translate(x, y) | translateX/Y/Z() | 平移；百分比相对元素自身，常用于绝对定位居中 | left:50%; transform:translateX(-50%) |
| rotate() | rotate(<角度>) | rotateX/Y/Z() | 旋转，单位 deg；3D 需配合 perspective | transform:rotate(45deg) |
| scale() | scale(x, y) | scaleX/Y() | 缩放，1 为原始大小；会让文本模糊时谨慎使用 | transform:scale(1.1) |
| skew() | skew(xDeg, yDeg) | 倾斜 | transform:skew(10deg,0) |
| transform-origin | transform-origin: <x> <y> | 变形基点，默认 50% 50% | transform-origin:top left |
| perspective | perspective: <长度> | 3D 透视距离，开启子元素 3D 空间 | perspective:800px |
| will-change | will-change: transform | opacity | 提前告知浏览器将变化的属性以优化合成层（避免滥用） | will-change:transform |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| px / % | 绝对 / 相对百分比 | px 固定像素；% 相对父级（背景图相对元素盒） | width:50% |
| em / rem | 相对字号单位 | em 相对父级字号会叠加，rem 相对根字号，推荐用 rem | font-size:1.2rem |
| vw / vh / vmin | 视口单位 | 1vw = 视口宽度的 1%；vmin 取较小边，适合移动端 | height:100vh |
| dvh / svh / lvh | 动态视口高度 | 移动端随浏览器工具栏伸缩的视口高度，替代 100vh 滚动溢出问题 | height:100dvh |
| calc() | calc(表达式) | 混合不同单位做计算，运算符两侧需留空格 | width:calc(100% - 40px) |
| min() / max() | min(a, b) / max(a, b) | 取较小/较大值，多用于响应式钳制 | font-size:min(16px,4vw) |
| clamp() | clamp(最小, 首选, 最大) | 把值钳制在区间内，流式排版利器 | font-size:clamp(14px,2.5vw,18px) |
| var() | var(--name, <fallback>) | 使用自定义属性（CSS 变量），支持运行时切换主题 | color:var(--text,#e6edf3) |
| color-mix() | color-mix(in srgb, a p%, b) | 按比例混合两种颜色 | border:1px solid color-mix(in srgb,#fff 20%,transparent) |
| fit-content / minmax() | grid 轨道函数 | minmax(200px,1fr) 限制轨道范围；fit-content 按内容收缩 | grid-template-columns:minmax(200px,1fr) |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| @media | @media <条件> { ... } | 按视口宽度/媒体特性应用样式，响应式核心 | @media (max-width:768px){.wrap{padding:12px}} |
| @container | @container <名称> (条件) | 容器查询：按父容器而非视口响应 | @container (min-width:400px){.card{flex-direction:row}} |
| prefers-color-scheme | @media (prefers-color-scheme: dark) | 跟随系统暗色模式 | @media (prefers-color-scheme:dark){:root{--bg:#0d1117}} |
| prefers-reduced-motion | @media (prefers-reduced-motion: reduce) | 尊重用户「减少动效」偏好 | @media (prefers-reduced-motion:reduce){*{transition:none}} |
| pointer / hover | @media (hover: hover) (pointer: fine) | 区分为触屏/鼠标设备，做交互降级 | @media (hover:hover){.card:hover{transform:translateY(-3px)}} |
| @supports | @supports (条件) | 特性检测，渐进增强 | @supports (display:grid){.list{display:grid}} |
| aspect-ratio | aspect-ratio: <宽>/<高> | 固定宽高比，用于视频/图片占位防布局抖动 | aspect-ratio:16/9 |
| orientation | @media (orientation: landscape) | 横屏/竖屏判断 | @media (orientation:portrait){.nav{flex-direction:column}} |
| 属性 / 选择器 | 语法 | 说明 | 示例 |
|---|---|---|---|
| :hover | a:hover | 鼠标悬停状态 | a:hover{text-decoration:underline} |
| :focus / :focus-visible | input:focus | 聚焦态；:focus-visible 仅键盘聚焦显示，鼠标点击不显示 | input:focus-visible{border-color:#2f81f7} |
| :nth-child() | :nth-child(n | 2n | odd | even) | 按位置匹配子元素；2n=偶数，odd=奇数 | li:nth-child(odd){background:#161b22} |
| :first-child / :last-child | E:first-child | 匹配父级第一个/最后一个子元素 | li:first-child{border-top:none} |
| :nth-of-type() | :nth-of-type(2n) | 在同类型兄弟中计数 | p:nth-of-type(2){color:#9aa7b8} |
| :not() | E:not(<选择器>) | 排除匹配元素 | a:not([href]){color:#6e7b8d} |
| :checked | input:checked + label | 表单选中态（radio/checkbox） | input:checked + label{color:#2f81f7} |
| :disabled | button:disabled | 禁用态表单控件 | button:disabled{opacity:.5; cursor:not-allowed} |
| :empty | E:empty | 匹配无子节点的元素 | div:empty{display:none} |
| ::before / ::after | E::before{content:...} | 生成内容伪元素，content 不可省 | .tag::before{content:"#"} |
| ::selection | ::selection | 文本选中高亮 | ::selection{background:#2f81f7; color:#fff} |
| ::placeholder | input::placeholder | 输入框占位符样式 | input::placeholder{color:#6e7b8d} |
| ::marker | li::marker | 列表符号样式 | li::marker{color:#4a9eff} |
| *层叠与继承 | 控制继承与层叠 | all:initial 重置全部；inherit 强制继承；unset 按默认；!important 提权重 | *{all:unset} a{color:inherit !important} |