cssreference.io

CSS Reference 是一个免费的 CSS 可视化指南，按功能把常用 CSS 属性分成若干集合（Collections），每个属性配图示或动画示例。想查某个属性属于哪一类、或按主题浏览有哪些属性可查，可以直接从下面的分类和属性清单入手。

分类总览

网站首页列出的集合包括：

• Animations（动画）
• Backgrounds（背景）
• Box model（盒模型）
• Flexbox
• CSS Grid（标注为 New!）
• Positioning（定位）
• Transitions（过渡）
• Typography（排版）

各分类下的具体属性

Animations

animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、animation

Backgrounds

background-attachment、background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、background

Box model

border-bottom-color、border-bottom-left-radius、border-bottom-right-radius、border-bottom-style、border-bottom-width、border-bottom、border-collapse、border-color、border-left-color、border-left-style、border-left-width、border-left、border-radius、border-right-color、border-right-style、border-right-width、border-right、border-style、border-top-color、border-top-left-radius、border-top-right-radius、border-top-style、border-top-width、border-top、border-width、border、box-sizing、height、line-height、margin-bottom、margin-left、margin-right、margin-top、margin、max-height、max-width、min-height、min-width

Flexbox

align-content、align-items、align-self、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、order

CSS Grid

grid-area、grid-auto-columns、grid-auto-flow、grid-auto-rows、grid-column-end、grid-column-gap、grid-column-start、grid-column、grid-gap、grid-row-end、grid-row-gap、grid-row-start、grid-row、grid-template-areas、grid-template-columns、grid-template-rows、grid-template、grid

Positioning

bottom、clear、display、float、left、position、right、top

Transitions

（首页集合中列出 Transitions 分类，具体属性名未在给定资料中逐条展开）

Typography

color、font-family、font-size、font-style、font-variant、font-weight、font、letter-spacing、line-height、list-style-image、list-style-position、list-style-type、list-style

其他

box-shadow、content、cursor、mix-blend-mode、opacity、outline-color、outline-style、outline-width、overflow-wrap、overflow-x、overflow-y

怎么用这份清单

• 按属性名定位：如果你已经知道要查的属性（比如 grid-template-columns），直接看它属于哪个分类，就能判断该去哪个集合里找示例。
• 按主题浏览：想系统看某一类效果（比如布局用 Flexbox 还是 Grid），先进入对应集合，再逐个属性看图示。
• 注意标注：CSS Grid 在首页被标为 New!，说明它是较新加入的内容，查网格布局时优先看这一组。

每个属性页面用插图和动画演示效果，适合在写样式时快速确认某个属性的表现，而不是只记语法。

CSS Reference 和 MDN 不是替代关系，而是两种查阅方式：想快速看懂某个属性“长什么样、起什么作用”，用 CSS Reference；想确认完整语法、浏览器兼容性或冷门特性，用 MDN。两者按目的切换即可。

核心定位差异

CSS Reference 对自己的定位是“A free visual guide to CSS”，用插图和动画示例解释最流行的属性。这意味着它的强项是“看见效果”，而不是“穷尽规范”。

CSS Reference 适合什么情况

• 第一次接触某个属性，想先知道它大概控制什么。
• 已经知道属性名，但记不清视觉表现，想快速确认。
• 复习 Flexbox、Grid、定位、过渡、动画这类布局与动效属性。

它的内容按集合组织，从页面可见的分类包括：

• Animations：animation-delay、animation-direction、animation-duration 等
• Backgrounds：background-color、background-image、background-size 等
• Box model：margin、padding、border、width、height 等
• Flexbox：align-items、justify-content、flex-grow、flex-wrap 等
• CSS Grid：grid-template-columns、grid-area、grid-gap 等
• Positioning：position、top、left 等
• Transitions、Typography 等

每个属性都归入对应集合，方便顺着一个主题连续看下去。

MDN 等文档适合什么情况

• 需要确认属性的完整取值、默认值和简写展开规则。
• 要查浏览器兼容性，判断某个写法能不能在目标环境用。
• 处理冷门属性、实验性特性或规范层面的细节。
• 需要看正式语法定义，而不只是效果演示。

这些正是可视化指南通常不深入的部分。CSS Reference 明确聚焦“最流行的属性”，所以遇到不常见特性时，转向 MDN 更稳妥。

怎么配合使用

一个实用的顺序是：

1. 在 CSS Reference 找到属性，先看示例建立直观印象。
2. 回到 MDN 核对语法、取值和兼容性。
3. 写代码时以 MDN 的规范描述为准，用 CSS Reference 辅助回忆效果。

例如需要给卡片做悬停过渡，可以先用 CSS Reference 的 Transitions 集合理解 transition 各子属性分别控制什么，再去 MDN 确认简写写法和浏览器支持，最后落到项目里。

选择建议

• 目标是“看懂效果、快速复习”：优先 CSS Reference。
• 目标是“查全、查准、查兼容”：优先 MDN。
• 不确定用哪个：先 CSS Reference 建立直觉，再 MDN 补细节，两者互补而非二选一。

CSS Reference 是一个免费的 CSS 可视化参考指南，核心做法是：为每个 CSS 属性配一个可交互的示例，用插图和动画直接展示该属性在不同取值下的效果。它适合把抽象属性变成看得见的变化，用来辅助学习或日常速查；但它不是系统课程，也不替代 MDN 这类完整文档。

它用什么方式讲解属性

每个属性页面围绕“这个属性做什么”展开，而不是大段文字定义。典型结构是：

• 一个可视示例：页面上直接渲染出元素，属性值改变时效果同步变化。
• 动画演示：涉及过渡、动画、定位等属性时，用动画展示过程，而不只是静态结果。
• 取值对照：把常见取值并排列出，方便对比不同取值带来的差异。

这种方式的价值在于：CSS 里很多属性（比如 align-items、grid-template-areas、mix-blend-mode）光看文字很难建立直觉，看到实际渲染结果后理解会快很多。

覆盖哪些属性和分类

网站按功能把属性分组，首页的 Collections 就是分类入口。从页面证据可以看到这些分类：

除上述分类外，页面还列出 box-shadow、box-sizing、cursor、display、float、opacity、overflow、outline 等常用属性。整体偏向“最流行的属性”，不是 CSS 规范的全量清单。

适合谁、怎么用

适合的场景：

• 初学某个布局模块（Flexbox、Grid）时，先用可视化示例建立直觉，再回去读规范。
• 写样式时想快速确认某个取值的效果，比如 background-size: cover 和 contain 到底差在哪。
• 复习时把分类当作检查清单，逐个过一遍。

不太适合的场景：

• 需要浏览器兼容性、语法细节、边缘取值说明时，应查 MDN 等文档。
• 需要系统学习路径和练习时，参考指南本身不提供课程结构。

使用条件

根据网站自身描述，它是“a free visual guide to CSS”，即免费开放的可视化指南。页面证据中没有出现付费、订阅或登录要求，因此可以按“打开网页即可查看”来理解；如果后续出现账号或付费入口，以网站实际显示为准。

一个具体的使用例子

假设你要搞清楚 justify-content 在 Flexbox 里的作用：

1. 打开 Flexbox 分类下的 justify-content 页面。
2. 页面上有一个横向排列的 flex 容器示例。
3. 切换 flex-start、center、space-between、space-around 等取值，观察子元素在主轴上的分布变化。
4. 对照自己的布局需求，选出匹配的取值，再回到项目里写代码。

预期结果是：你能直接看出每个取值把子元素推到主轴的哪个位置、间距如何分配，而不是靠记忆定义。

常见卡点

• 示例是孤立的：每个页面只演示单个属性，真实项目里属性会互相影响（比如 flex-grow 和 flex-basis 一起作用），需要自己组合验证。
• 分类名和属性名混排：首页列表里既有分类（如 flexbox、box-model）也有具体属性，找属性时按字母顺序定位更快。
• 不是规范文档：遇到语法细节或兼容性问题，仍需回到 MDN 或规范原文核对。

CSS Reference（cssreference.io）是一个免费的 CSS 可视化参考指南，用插图和动画示例讲解最常用的 CSS 属性。它适合正在学习 CSS 的开发者、需要快速查阅某个属性效果的前端工程师，以及想直观理解样式行为的设计者。网站按属性名和分类组织内容，浏览即可使用，无需注册。

网站提供什么内容

根据网站首页信息，CSS Reference 的核心内容是一份按属性排列的 CSS 参考列表，每个条目对应一个具体属性，并配有可视化示例。首页明确将其定位为 "A free visual guide to CSS"（免费的 CSS 可视化指南），并说明它收录最流行的属性，用插图和动画示例来解释它们。

这意味着它的重点不是穷尽 CSS 规范中的每一个属性，而是覆盖日常开发中最常打交道的那些，并且用"看得见"的方式呈现效果，而不是只给文字定义。

内容如何分类

网站把属性归入若干集合（Collections），方便按主题查找。首页列出的分类包括：

除分类外，首页也直接按属性名列出条目，例如 align-content、border-radius、box-shadow、display、float、mix-blend-mode、opacity、order、overflow-x 等。分类和属性名两条路径并存，既可以按主题系统学习，也可以按具体属性直接定位。

适合哪些人使用

• CSS 初学者：通过动画和插图理解属性"到底做了什么"，比读规范文字更直观。
• 有经验的开发者：需要确认某个属性的取值或视觉效果时，作为快速查阅工具。
• 设计者：想了解某个样式在浏览器中的实际表现，用于沟通或验证设计意图。

怎么使用

1. 打开 cssreference.io。
2. 从首页的分类（如 Flexbox、CSS Grid）进入，或直接在属性列表中点击目标属性名。
3. 查看该属性的示例，观察插图或动画呈现的效果。
4. 结合示例理解属性的作用，再应用到自己的项目中。

整个过程不需要注册或登录。网站定位为免费指南，首页未提及付费、订阅或账号限制。

使用时需要注意什么

• 它是一份常用属性的参考，不是完整规范。遇到冷门属性或最新特性时，可能需要查阅 MDN 等更全面的文档。
• 示例展示的是属性的典型效果，实际表现会受浏览器版本、其他样式和上下文影响，落地时仍应在目标环境中验证。
• 网站内容以英文呈现，属性名本身是 CSS 标准写法，不受语言影响。

如果你的目标是"快速看懂某个常用 CSS 属性长什么样、起什么作用"，CSS Reference 是一个直接可用的入口；如果需要完整的属性清单和边界情况说明，把它作为起点、再配合规范文档会更稳妥。