CSS3属性速查表2024：前端开发者CSS属性参考完整指南

📊 SEO元描述：2024年最新CSS3属性速查表，详解选择器速查、属性分类索引、兼容性表格。包含完整常用代码片段，适合前端开发者快速查阅参考。

核心关键词：CSS3属性速查表2024、CSS选择器速查、CSS属性索引、CSS兼容性表格、CSS代码片段、CSS参考手册

长尾关键词：CSS3属性怎么查、CSS选择器有哪些、CSS属性分类索引、CSS兼容性如何查询、CSS常用代码片段

---

📚 CSS3属性速查表学习目标与核心收获

通过本节CSS3属性速查表，你将系统性掌握：

• ✅ 选择器速查：快速查找和使用各种CSS选择器语法
• ✅ 属性分类索引：按功能分类的CSS属性完整索引
• ✅ 兼容性表格：主流浏览器对CSS属性的支持情况
• ✅ 常用代码片段：实用的CSS代码模板和最佳实践
• ✅ 快速参考：提高开发效率的CSS属性查询能力
• ✅ 标准规范：了解CSS属性的标准定义和使用规范

🎯 适合人群

• 前端开发者的日常开发参考和查询需求
• 初学者的CSS属性学习和记忆辅助
• 项目开发者的快速查阅和代码编写支持
• 技术面试者的CSS知识点复习和准备

---

🌟 CSS3属性速查表是什么？为什么是开发必备？

CSS3属性速查表是什么？这是前端开发者最实用的工具之一。CSS3属性速查表是系统化整理的CSS属性参考文档，也是高效前端开发的重要工具。

CSS3属性速查表的核心价值

• 🎯 提升效率：快速查找所需的CSS属性和语法
• 🔧 减少错误：避免属性名称和语法的拼写错误
• 💡 学习辅助：帮助记忆和理解CSS属性的用法
• 📚 标准参考：提供权威的CSS属性定义和规范
• 🚀 开发加速：通过快速参考提升代码编写速度

💡 使用建议：将速查表作为开发工具收藏，在编写CSS时随时查阅，逐步提升对CSS属性的熟练度。

选择器速查：CSS选择器完整参考

CSS选择器是样式应用的基础，掌握各种选择器的语法和用法是CSS开发的关键。

/* 🎉 CSS选择器速查表 */

/* ========== 基础选择器 ========== */
/* 元素选择器 */
p { color: #333; }
div { margin: 10px; }
h1 { font-size: 2em; }

/* 类选择器 */
.container { max-width: 1200px; }
.button { padding: 12px 24px; }
.text-center { text-align: center; }

/* ID选择器 */
#header { background-color: #f8f9fa; }
#main-content { flex: 1; }
#footer { margin-top: auto; }

/* 通配符选择器 */
* { box-sizing: border-box; }
*.hidden { display: none; }

/* ========== 属性选择器 ========== */
/* 存在属性 */
[title] { cursor: help; }
[disabled] { opacity: 0.6; }

/* 属性值完全匹配 */
[type="text"] { border: 1px solid #ccc; }
[class="button"] { background-color: #007bff; }

/* 属性值包含指定值 */
[class~="active"] { font-weight: bold; }
[title~="important"] { color: red; }

/* 属性值以指定值开头 */
[href^="https://"] { color: green; }
[src^="/images/"] { border: 1px solid #ddd; }

/* 属性值以指定值结尾 */
[href$=".pdf"] { background: url(pdf-icon.png) no-repeat; }
[src$=".jpg"] { border-radius: 4px; }

/* 属性值包含指定子串 */
[href*="example"] { text-decoration: underline; }
[class*="btn"] { cursor: pointer; }

/* ========== 伪类选择器 ========== */
/* 链接伪类 */
a:link { color: #007bff; }
a:visited { color: #6f42c1; }
a:hover { color: #0056b3; }
a:active { color: #004085; }

/* 结构伪类 */
:first-child { margin-top: 0; }
:last-child { margin-bottom: 0; }
:nth-child(odd) { background-color: #f8f9fa; }
:nth-child(2n) { background-color: #e9ecef; }
:nth-child(3n+1) { font-weight: bold; }

/* 表单伪类 */
:focus { outline: 2px solid #007bff; }
:hover { opacity: 0.8; }
:disabled { cursor: not-allowed; }
:checked { background-color: #28a745; }
:valid { border-color: #28a745; }
:invalid { border-color: #dc3545; }

/* 否定伪类 */
:not(.hidden) { display: block; }
:not([disabled]) { cursor: pointer; }

/* ========== 伪元素选择器 ========== */
::before { content: ""; display: block; }
::after { content: ""; clear: both; }
::first-line { font-weight: bold; }
::first-letter { font-size: 2em; float: left; }
::selection { background-color: #007bff; color: white; }

/* ========== 组合选择器 ========== */
/* 后代选择器 */
.container p { margin-bottom: 1rem; }
nav ul li { list-style: none; }

/* 子元素选择器 */
.menu > li { display: inline-block; }
.card > .header { border-bottom: 1px solid #dee2e6; }

/* 相邻兄弟选择器 */
h2 + p { margin-top: 0; }
.button + .button { margin-left: 10px; }

/* 通用兄弟选择器 */
h2 ~ p { color: #666; }
.active ~ .item { opacity: 0.7; }

选择器优先级速查

/* 优先级计算（从高到低）*/
/* 内联样式: 1000 */
/* ID选择器: 100 */
/* 类选择器、属性选择器、伪类: 10 */
/* 元素选择器、伪元素: 1 */

/* 示例优先级计算 */
#nav .menu li a:hover { } /* 100 + 10 + 1 + 1 + 10 = 122 */
.container .content p { } /* 10 + 10 + 1 = 21 */
div p { } /* 1 + 1 = 2 */

属性分类索引：按功能分类的CSS属性

布局相关属性

/* 🎉 布局属性速查 */

/* ========== 显示类型 ========== */
display: none | block | inline | inline-block | flex | grid | table;

/* ========== 定位属性 ========== */
position: static | relative | absolute | fixed | sticky;
top: <length> | <percentage> | auto;
right: <length> | <percentage> | auto;
bottom: <length> | <percentage> | auto;
left: <length> | <percentage> | auto;
z-index: <integer> | auto;

/* ========== 浮动属性 ========== */
float: none | left | right;
clear: none | left | right | both;

/* ========== 盒模型属性 ========== */
/* 尺寸 */
width: <length> | <percentage> | auto | min-content | max-content;
height: <length> | <percentage> | auto | min-content | max-content;
min-width: <length> | <percentage> | auto;
max-width: <length> | <percentage> | none;
min-height: <length> | <percentage> | auto;
max-height: <length> | <percentage> | none;

/* 内边距 */
padding: <length> | <percentage>;
padding-top: <length> | <percentage>;
padding-right: <length> | <percentage>;
padding-bottom: <length> | <percentage>;
padding-left: <length> | <percentage>;

/* 边框 */
border: <border-width> <border-style> <border-color>;
border-width: <length> | thin | medium | thick;
border-style: none | solid | dashed | dotted | double;
border-color: <color>;
border-radius: <length> | <percentage>;

/* 外边距 */
margin: <length> | <percentage> | auto;
margin-top: <length> | <percentage> | auto;
margin-right: <length> | <percentage> | auto;
margin-bottom: <length> | <percentage> | auto;
margin-left: <length> | <percentage> | auto;

/* 盒模型 */
box-sizing: content-box | border-box;

Flexbox属性速查

/* ========== Flex容器属性 ========== */
display: flex | inline-flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <flex-direction> <flex-wrap>;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
align-items: stretch | flex-start | flex-end | center | baseline;
align-content: stretch | flex-start | flex-end | center | space-between | space-around;

/* ========== Flex项目属性 ========== */
order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | <percentage> | auto;
flex: <flex-grow> <flex-shrink> <flex-basis>;
align-self: auto | stretch | flex-start | flex-end | center | baseline;

Grid属性速查

/* ========== Grid容器属性 ========== */
display: grid | inline-grid;
grid-template-columns: <track-size> | <line-name> | subgrid;
grid-template-rows: <track-size> | <line-name> | subgrid;
grid-template-areas: <grid-area-name> | none;
grid-template: <grid-template-rows> / <grid-template-columns>;
grid-column-gap: <length>;
grid-row-gap: <length>;
grid-gap: <grid-row-gap> <grid-column-gap>;
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;

/* ========== Grid项目属性 ========== */
grid-column-start: <line> | span <number>;
grid-column-end: <line> | span <number>;
grid-row-start: <line> | span <number>;
grid-row-end: <line> | span <number>;
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;

文本和字体属性

/* ========== 字体属性 ========== */
font-family: <family-name> | <generic-family>;
font-size: <length> | <percentage> | xx-small | x-small | small | medium | large | x-large | xx-large;
font-weight: normal | bold | bolder | lighter | 100-900;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>;

/* ========== 文本属性 ========== */
color: <color>;
text-align: left | right | center | justify;
text-decoration: none | underline | overline | line-through;
text-transform: none | capitalize | uppercase | lowercase;
text-indent: <length> | <percentage>;
line-height: normal | <number> | <length> | <percentage>;
letter-spacing: normal | <length>;
word-spacing: normal | <length>;
white-space: normal | nowrap | pre | pre-line | pre-wrap;
text-overflow: clip | ellipsis;
word-wrap: normal | break-word;
word-break: normal | break-all | keep-all;

背景和边框属性

/* ========== 背景属性 ========== */
background-color: <color> | transparent;
background-image: <url> | none;
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
background-position: <position>;
background-size: <length> | <percentage> | auto | cover | contain;
background-attachment: scroll | fixed | local;
background-origin: padding-box | border-box | content-box;
background-clip: border-box | padding-box | content-box;
background: <bg-color> <bg-image> <bg-repeat> <bg-attachment> <bg-position>;

/* ========== 渐变 ========== */
background-image: linear-gradient(<angle>, <color-stop>, <color-stop>);
background-image: radial-gradient(<shape> <size> at <position>, <color-stop>, <color-stop>);

/* ========== 边框图像 ========== */
border-image-source: <url> | none;
border-image-slice: <number> | <percentage>;
border-image-width: <length> | <percentage> | <number> | auto;
border-image-outset: <length> | <number>;
border-image-repeat: stretch | repeat | round | space;
border-image: <source> <slice> / <width> / <outset> <repeat>;

---

📚 CSS3属性速查表学习总结与下一步规划

✅ 本节核心收获回顾

通过本节CSS3属性速查表的学习，你已经掌握：

1. 选择器完整语法：掌握了各种CSS选择器的语法和使用方法
2. 属性分类索引：建立了按功能分类的CSS属性知识体系
3. 快速查询能力：提升了CSS开发中的属性查找和使用效率
4. 标准规范理解：了解了CSS属性的标准定义和语法规范
5. 实用参考工具：获得了日常开发中的实用参考资料

🎯 CSS3属性速查表下一步

1. 收藏使用：将速查表作为开发工具收藏，随时查阅
2. 实践应用：在实际项目中使用速查表提升开发效率
3. 持续更新：关注CSS新属性，及时更新个人速查表
4. 深入学习：对不熟悉的属性进行深入学习和实践

🔗 相关学习资源

• MDN CSS参考：最权威的CSS属性文档和示例
• Can I Use：CSS属性浏览器兼容性查询工具
• CSS-Tricks Almanac：CSS属性详细说明和示例
• W3C CSS规范：CSS属性的官方标准文档

💪 使用建议

1. 日常查阅：在编写CSS时随时查阅速查表
2. 记忆辅助：通过反复查阅逐步记忆常用属性
3. 扩展学习：对不熟悉的属性进行深入学习
4. 实践验证：通过实际使用验证属性的效果和兼容性

兼容性表格：主流浏览器支持情况

CSS3核心特性兼容性

特性	Chrome	Firefox	Safari	Edge	IE
Flexbox	29+	28+	9+	12+	11+
Grid Layout	57+	52+	10.1+	16+	❌
CSS Variables	49+	31+	9.1+	15+	❌
Border Radius	4+	4+	5+	12+	9+
Box Shadow	10+	4+	5.1+	12+	9+
Text Shadow	2+	3.5+	1.1+	12+	10+
Transforms 2D	36+	16+	9+	12+	9+
Transforms 3D	36+	16+	9+	12+	10+
Transitions	26+	16+	9+	12+	10+
Animations	43+	16+	9+	12+	10+
Media Queries	1+	3.5+	4+	12+	9+
Gradients	26+	16+	7+	12+	10+

CSS4新特性兼容性

特性	Chrome	Firefox	Safari	Edge	状态
Container Queries	105+	110+	16+	105+	🟢 稳定
Cascade Layers	99+	97+	15.4+	99+	🟢 稳定
CSS Nesting	112+	117+	16.5+	112+	🟡 实验性
Subgrid	❌	71+	16+	❌	🟡 部分支持
:has() Selector	105+	103+	15.4+	105+	🟢 稳定

常用代码片段：实用CSS模板

布局代码片段

/* 🎉 常用布局代码片段 */

/* ========== 水平垂直居中 ========== */
/* Flexbox居中 */
.center-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Grid居中 */
.center-grid {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* 绝对定位居中 */
.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========== 响应式布局 ========== */
/* 响应式网格 */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 响应式Flexbox */
.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.responsive-flex > * {
  flex: 1 1 300px;
}

/* ========== 圣杯布局 ========== */
.holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

组件代码片段

/* ========== 按钮组件 ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background-color: #007bff;
  color: white;
}

.btn--secondary {
  background-color: #6c757d;
  color: white;
}

/* ========== 卡片组件 ========== */
.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card__header {
  padding: 20px 20px 0;
}

.card__body {
  padding: 20px;
}

.card__footer {
  padding: 0 20px 20px;
  border-top: 1px solid #e9ecef;
  margin-top: 20px;
  padding-top: 20px;
}

/* ========== 导航组件 ========== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar__brand {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  text-decoration: none;
}

.navbar__nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 2rem;
}

.navbar__link {
  color: #666;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.navbar__link:hover,
.navbar__link--active {
  color: #007bff;
}

动画代码片段

/* ========== 常用动画 ========== */
/* 淡入动画 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* 滑入动画 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in-up {
  animation: slideInUp 0.6s ease-out;
}

/* 脉冲动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.pulse {
  animation: pulse 2s infinite;
}

/* 加载动画 */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

实用工具类

/* ========== 实用工具类 ========== */
/* 间距工具类 */
.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

/* 文本工具类 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }

.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-bold { font-weight: 700; }

/* 显示工具类 */
.d-none { display: none; }
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flexbox工具类 */
.justify-content-start { justify-content: flex-start; }
.justify-content-center { justify-content: center; }
.justify-content-end { justify-content: flex-end; }
.justify-content-between { justify-content: space-between; }
.justify-content-around { justify-content: space-around; }

.align-items-start { align-items: flex-start; }
.align-items-center { align-items: center; }
.align-items-end { align-items: flex-end; }
.align-items-stretch { align-items: stretch; }

/* 颜色工具类 */
.text-primary { color: #007bff; }
.text-secondary { color: #6c757d; }
.text-success { color: #28a745; }
.text-danger { color: #dc3545; }
.text-warning { color: #ffc107; }
.text-info { color: #17a2b8; }

.bg-primary { background-color: #007bff; }
.bg-secondary { background-color: #6c757d; }
.bg-success { background-color: #28a745; }
.bg-danger { background-color: #dc3545; }
.bg-warning { background-color: #ffc107; }
.bg-info { background-color: #17a2b8; }

---

🔍 常见问题FAQ

Q1: 如何快速查找需要的CSS属性？

A: 建议按功能分类查找，如布局相关查看display、position等，样式相关查看color、background等。同时可以使用浏览器开发者工具的自动补全功能。

Q2: CSS属性的浏览器兼容性如何查询？

A: 推荐使用Can I Use网站查询具体属性的浏览器支持情况，或参考本速查表的兼容性表格进行快速判断。

Q3: 新的CSS特性什么时候可以使用？

A: 建议在主流浏览器支持度达到80%以上时在生产环境使用，同时准备好降级方案。实验性特性可以在开发环境中尝试。

Q4: 如何记忆这么多CSS属性？

A: 建议按功能分类记忆，先掌握常用属性，通过实际项目练习加深印象。不需要全部记住，重要的是知道在哪里查找。

Q5: CSS代码片段如何在项目中使用？

A: 可以将常用代码片段保存为代码模板，在IDE中设置快捷键快速插入。建议根据项目需求调整和优化代码片段。

---

"CSS3属性速查表是前端开发者的得力助手，熟练使用速查表将大大提升你的开发效率和代码质量。"