想查CSS3手册时，重点不是泛看概念，而是快速找到属性作用、常见取值、典型语法与可直接验证的示例。下面按高频模块整理CSS3基础语法、选择器、布局、动画和响应式样式，方便在写页面时直接查询和套用。

CSS3的基本写法由选择器和声明块组成，常见格式是 selector { property: value; }。查手册时，建议优先看属性作用、语法格式、常见取值、默认值和是否需要搭配其他属性使用。这样遇到样式不生效、布局错位或动效异常时，能更快定位原因。

• 基础语法：选择器 { 属性: 值; }，一条声明以分号结尾
• 常见单位：px、em、rem、%、vw、vh，不同单位适合不同场景
• 优先级规则：内联样式、ID、类/伪类、标签，后写的同级规则通常会覆盖前者
• 易错点：属性名拼写错误、漏写分号、选择器未命中、块级和行内元素表现不同

选择器决定样式命中范围，是查CSS3手册时最常用的部分。基础选择器适合快速指定元素，组合选择器适合限定层级关系，伪类和伪元素则常用于交互状态和局部装饰。实际开发中，先判断要命中的是单个元素、某类状态还是结构位置，再选择最合适的写法。

• 基础选择器：.card、#nav、p，分别用于类、ID和标签
• 组合选择器：.menu li、.box > p、h2 + p，分别表示后代、子代、相邻兄弟
• 伪类选择器：:hover、:focus、:first-child，适合悬停、聚焦和结构状态
• 伪元素：::before、::after，常用于补充图标、分隔线和装饰内容

一份更像手册的CSS3内容，应该能让用户快速按模块定位属性。选择器负责命中范围，盒模型负责尺寸与间距，布局负责排列方式，动画负责状态变化与连续动作，响应式样式负责不同屏幕下的适配。查阅时可以先按需求分类，再看对应属性的语法和搭配关系。

• 盒模型：width、height、margin、padding、border、box-sizing，决定尺寸计算和留白方式
• 布局：display、position、flex、grid、justify-content、align-items，决定排列和对齐
• 视觉：background、color、border-radius、box-shadow、opacity，决定外观表现
• 动画：transition、transform、animation，分别处理过渡、形变和关键帧动画
• 响应式：@media、max-width、min-width，控制不同屏幕下的样式切换

盒模型相关属性直接影响元素尺寸和间距，是排版最基础的部分。width 和 height 控制内容区域尺寸，padding 增加内容与边框之间的内边距，margin 控制元素与外部的距离，border 设置边框。使用 box-sizing: border-box 后，width 和 height 会包含 padding 与 border，更适合做稳定布局。视觉上常与 background、border-radius、box-shadow 一起使用，完成卡片、按钮和面板样式。

• width / height：常用值为 px、% 和 auto，百分比通常相对父元素计算
• margin / padding：可写 1 到 4 个值，顺序通常是上、右、下、左
• border-radius：常用来做圆角按钮、卡片和头像，值越大圆角越明显
• box-shadow：语法常见为 x偏移 y偏移 模糊 扩散 颜色，可做浮层和卡片阴影

CSS3布局常见有普通文档流、定位、Flex 和 Grid。display 决定元素参与哪种布局，position 适合做局部定位，Flex 更适合一维排列和对齐，Grid 更适合二维网格。查手册时不要只记属性名，还要看它处于哪种布局模式下，因为同一个属性在不同模式中的表现会明显不同。

• display: block / inline / inline-block，用于控制元素基础显示方式
• position: relative / absolute / fixed / sticky，常配合 top、right、bottom、left 使用
• Flex 常用属性：display: flex、justify-content、align-items、gap，适合导航、按钮组、列表横向排列
• Grid 常用属性：display: grid、grid-template-columns、grid-template-rows、gap，适合卡片墙和后台面板布局

动效部分通常分为 transition、transform 和 animation。transition 适合状态切换，如悬停变色；transform 适合位移、旋转、缩放；animation 适合连续执行的关键帧动作。使用时要先明确是一次状态变化还是持续动画，再选择对应属性。

• transition：常见写法为 transition: all 0.3s ease;，包含属性、时长和速度曲线
• transform：常用函数有 translate()、scale()、rotate()，可组合使用
• animation：常见写法为 animation: fadeIn 0.6s ease forwards;，包含名称、时长、曲线和填充模式
• 易错点：过渡必须有状态变化才会触发，关键帧动画需要先定义 @keyframes

响应式样式用于处理手机、平板和桌面等不同屏幕宽度下的布局变化，核心写法是媒体查询。最常见的是根据 max-width 或 min-width 切换字体大小、排列方向、边距和列数。实际使用时，通常先写默认样式，再针对特定断点做覆盖，这样结构更清晰。

• 常见语法：@media (max-width: 768px) { ... }，表示屏宽不超过 768px 时生效
• 常见调整项：font-size、padding、flex-direction、grid-template-columns
• 移动端适配中，图片常配合 max-width: 100%; height: auto; 使用
• 易错点：断点冲突、选择器权重不足、只改宽度未同步调整间距和字号

这个示例用于实现鼠标移入按钮后背景色变深、按钮轻微上移的效果，适合练习 transition、background 和 transform 的组合。把代码复制到任意HTML页面中即可直接验证。

• 实现目标：让按钮在悬停时更有反馈感
• 关键属性：transition 控制变化过程，transform 负责位移，background 控制颜色变化
• 示例代码：立即查看
• 注意事项：如果按钮是行内元素，部分位移和尺寸表现不明显，通常会配合 inline-block 或 block 使用

这个示例用于实现左侧固定宽度、右侧自适应的两栏布局，适合练习 display:flex、gap 和 flex:1 的搭配。它是后台页面、内容页和信息面板中非常常见的结构。

• 实现目标：左侧导航固定，右侧内容区自动填满剩余空间
• 关键属性：display:flex 建立弹性布局，gap 控制间距，flex:1 让主内容区域自适应
• 示例代码：
  内容区
• 注意事项：如果父容器宽度不足，两栏可能被压缩，此时可增加最小宽度或在小屏下改为纵向排列

这个示例同时覆盖 CSS3动画效果 和 响应式样式。页面加载时卡片淡入上移，在小屏幕下自动变成单列布局，适合练习 animation、@keyframes 和 media query 的结合使用。

• 实现目标：卡片进入页面时更自然，小屏设备阅读更舒适
• 关键属性：animation 调用关键帧，transform 和 opacity 参与动画，@media 负责小屏切换
• 示例代码：
  卡片A

  卡片B
• 注意事项：animation 适合连续或初始化动作，若只是 hover 变化，通常优先用 transition 更简单

CSS3手册的核心价值，是让你在查选择器、属性语法、布局方式、动画参数和响应式写法时能快速找到可用答案。把高频属性按模块理解，再结合最小示例直接验证，既方便查阅，也更容易在真实页面里稳定复用。

《夸克》非常好用的免费AI浏览器

下载APP查看