前端开发中，CSS3 属性繁多且易混淆，开发者常因选择器误伤、盒模型计算偏差、布局轴搞反或动画状态未保留而反复调试。本文按高频问题模块整理核心属性，提供语法、取值、可直接复用的示例与兼容性判断依据，帮助你在实际项目中快速定位并解决问题。

选择器：精准命中与排除规则

选择器决定样式命中范围。在表单校验、列表筛选或结构定位时，优先确认选择器是否会误伤兄弟元素或文本节点。

伪类与伪元素

• :nth-child(n)：按序号匹配子元素。示例：li:nth-child(2n) { background:#f5f5f5; }。适用于隔行样式、栅格列表。
• :nth-of-type(n)：按同类型标签计数，避免不同标签混排干扰。示例：p:nth-of-type(2) { color:#333; }。适用于正文段落定制。
• :not(selector)：排除指定选择器。示例：.menu-item:not(.active) { opacity:.7; }。适用于批量处理未激活项。
• :checked：匹配选中状态的单选框和复选框。示例：input:checked + label { font-weight:700; }。适用于表单交互反馈。
• :disabled 与 :enabled：匹配控件可用状态。示例：button:disabled { cursor:not-allowed; opacity:.5; }。适用于提交按钮状态切换。
• :target：匹配当前 URL 哈希指向元素。示例：.dialog:target { display:block; }。适用于无 JS 锚点弹层、目录跳转。
• ::before 与 ::after：插入装饰性内容，必须配合 content 使用。示例：.tag::before { content:'NEW'; }。适用于角标、分隔线、图标前缀。

属性选择器

按属性值精确、前缀或包含匹配。语法示例：[type='email']、[class^='icon-']、[data-id*='card']。适用于表单、组件库、数据标记样式。

盒模型与背景：尺寸计算与视觉铺陈

页面搭建阶段最常查的是尺寸计算、背景铺法和视觉边框。先判断问题属于盒模型、背景还是装饰效果，再选属性，能明显减少试错。

盒模型与边框

• box-sizing：决定 width/height 是否包含 padding 和 border。取值：content-box | border-box。示例：.card { box-sizing:border-box; width:300px; padding:24px; }。做固定宽卡片时优先用 border-box，避免尺寸被内边距撑大。
• border-radius：设置圆角。示例：.btn { border-radius:999px; }。适用于胶囊按钮、头像、卡片。
• border-image：用图片或渐变绘制边框。示例：border-image:linear-gradient(90deg,#ff7a18,#af002d) 1;。适用于高亮描边、活动专题视觉。旧项目慎用，先检查目标浏览器。

背景控制

• background-size：控制背景图缩放。取值：cover | contain | 100% 100%。示例：.hero { background:url(hero.jpg) center/cover no-repeat; }。cover 会裁切但铺满区域，contain 完整显示但可能留白。
• background-origin 与 background-clip：控制背景从哪里开始绘制、裁切到哪里。取值：padding-box、border-box、content-box。示例：.panel { background-clip:padding-box; }。适用于半透明边框、内层背景。
• background 多值简写：一次设置颜色、图片、位置、尺寸、重复与附着方式。示例：background:#111 url(bg.png) center/cover no-repeat fixed;。适用于首屏横幅、专题头图。
• linear-gradient：线性渐变背景。示例：.banner { background:linear-gradient(135deg,#00c6ff,#0072ff); }。适用于按钮、头图区块、蒙层。
• box-shadow：添加投影层次。示例：.card:hover { box-shadow:0 12px 32px rgba(0,0,0,.16); }。适用于卡片浮起、弹层。可用 inset 做内阴影。
• opacity：整体透明度，取值 0 到 1。示例：.disabled { opacity:.45; }。注意会影响子元素，一般只想淡化背景时优先用 rgba 颜色。

文本处理与 Flex 布局：对齐与间距控制

文本可读性和布局对齐是最常见的开发问题。处理文字时先看是否需要截断、换行或缩放；处理布局时先区分主轴和交叉轴，避免把 justify-content 与 align-items 用反。

文本控制

• text-overflow：文本超出显示省略号。示例：.title { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }。适用于单行标题截断。
• word-break 与 overflow-wrap：控制长单词或长链接换行。示例：word-break:break-all;、overflow-wrap:anywhere;。适用于评论区、表格、英文 URL 展示。中文一般少用 break-all，避免断词难看。
• text-shadow：给文字添加阴影。示例：text-shadow:0 2px 6px rgba(0,0,0,.25);。适用于图片上的标题增强可读性。

Flex 布局核心属性

• display:flex：开启一维弹性布局。示例：.nav { display:flex; gap:16px; }。适用于导航、按钮组、卡片头部。
• justify-content：控制主轴分布。常见值：flex-start、center、space-between、space-around、space-evenly。示例：.toolbar { display:flex; justify-content:space-between; }。主轴通常是水平方向，取决于 flex-direction。
• align-items：控制交叉轴对齐。常见值：stretch、center、flex-start、flex-end。示例：.toolbar { display:flex; align-items:center; }。做垂直居中时通常配合 display:flex 使用。
• flex：控制伸缩比例、压缩和基准尺寸。示例：flex:1; 或 flex:0 0 240px;。适用于左侧固定右侧自适应、等分列布局。
• gap：统一设置 flex 或 grid 子项间距。示例：gap:12px;、row-gap:16px;、column-gap:24px;。适用于列表和卡片网格。比给子项写 margin 更易维护。
• position:sticky：元素滚动到阈值后吸附。示例：position:sticky; top:0;。适用于吸顶导航、表头。注意祖先元素 overflow 可能导致失效。

动画与过渡：状态切换与性能优化

轻交互优先用 transition，持续演示或多阶段效果再用 animation。判断标准：如果状态由 hover、focus、active 或类名切换触发，通常先考虑 transition；如果需要自动播放、循环或多关键帧控制，再用 animation。

过渡与变形

• transition：让属性变化平滑过渡。示例：.card { transition:transform .3s ease, box-shadow .3s ease; } .card:hover { transform:translateY(-4px); }。适用于按钮悬浮、展开收起。尽量避免直接写 all，便于控制性能。
• transition-timing-function：控制速度曲线。常见值：ease、linear、ease-in、ease-out、cubic-bezier(...)。linear 适合匀速加载条，ease-out 更适合元素进入。
• transform:translate()：位移，不影响文档流。示例：translateX(20px)、translateY(-4px)。适用于悬浮上移、抽屉滑入。比改 top/left 更顺滑。
• transform:scale()：缩放元素。示例：scale(1.05)。适用于图片放大、卡片强调。注意父级若有 overflow:hidden 会裁切放大内容。
• transform:rotate()：旋转元素。示例：rotate(45deg)。适用于箭头翻转、关闭图标。
• transform-origin：定义变形基点。示例：.menu { transform-origin:top right; }。适用于下拉层从右上角展开。

关键帧动画

• @keyframes：定义关键帧序列。示例：@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }。适用于淡入、骨架屏闪动、提示气泡。
• animation：调用关键帧。示例：animation: fadeIn .6s ease forwards;。参数包含名称、时长、曲线、延迟、次数、方向、填充模式、播放状态。forwards 会让动画结束后保留最后一帧状态。
• animation-iteration-count：控制播放次数。常见值：1、infinite。适用于 loading 图标可循环，内容入场动画一般只播一次。

响应式适配与兼容性：断点、单位与降级策略

响应式处理不仅是写媒体查询，还包括单位选择、图片缩放和旧浏览器兼容判断。实际项目中，高频问题通常出在前缀、旧版移动浏览器和特性降级。先保证核心布局可用，再叠加增强效果更稳妥。

• @media：按视口条件切换样式。示例：@media screen and (max-width:768px){...}。适用于移动端断点适配。常见断点可按 1200px、992px、768px、576px 分层。
• rem 与 vw：rem 适合统一缩放体系，vw 适合首屏比例布局。移动端字号和间距多用 rem，大幅视觉区块可配合 vw。
• Flex 兼容性：现代 Chrome、Edge、Firefox、Safari 和主流移动端均支持 flex；极旧 Android WebView 或 IE10/11 项目需回查旧语法或降级方案。若面向旧环境，自动补前缀比手写更稳。
• 前缀处理：常见前缀 -webkit-、-moz-。transform、animation、gradient 在现代项目通常无需手写多前缀；若目标包含旧版 Safari 或旧安卓浏览器，可通过构建工具自动补齐。
• 渐变兼容提醒：linear-gradient 在现代浏览器支持良好；很旧的移动浏览器可能需要前缀版本，保底可先写纯色背景。
• sticky 兼容提醒：position:sticky 在现代浏览器可用，但祖先容器设置 overflow:hidden/auto 时容易失效；旧浏览器可降级为 fixed 或普通静态定位。
• opacity 与 rgba 取舍：只想让背景半透明时优先 background:rgba(...)，避免 opacity 让子元素一起变淡。
• 动画性能提醒：优先动画 transform 和 opacity，少改 width、height、top、left 等会引发布局重排的属性。
• 图片响应式：示例 img { max-width:100%; height:auto; }。避免图片撑破容器，适用于文章内容区、商品图、移动端详情页。

高频问题速查清单

这份手册主体建议按问题反查：对不齐先看 flex 主轴和交叉轴，背景异常先看 background-size 与简写顺序，动画停留状态不对先看 fill-mode，移动端错位先检查媒体查询与盒模型。保留一份自己的高频片段清单仍然有价值，但应建立在可直接复用的属性条目之上。

• 按钮悬浮优先组合：transition + transform + box-shadow。
• 卡片铺图优先检查：background-position、background-size:cover、容器高度是否明确。
• 单行省略必须同时满足：overflow:hidden、white-space:nowrap、text-overflow:ellipsis。
• flex 垂直居中常用写法：display:flex + align-items:center；水平分散常配 justify-content:space-between。
• 动画结束状态未保留时，先检查 animation-fill-mode:forwards 是否缺失。