CSS 总结
下面是一份 CSS 的全局性精华总结，涵盖从基础概念到实用技巧，适合作为快速查阅的“CSS 万能速查表”。
一、选择器（Selectors）
- 基础选择器
- 元素：
div、p - 类：
.class-name - ID：
#id-name - 通配：
*
- 元素：
- 组合选择器
- 后代：
A B - 子元素：
A > B - 相邻兄弟：
A + B - 通用兄弟：
A ~ B
- 后代：
- 属性选择器
[attr]、[attr="value"]、[attr^="start"]、[attr$="end"]、[attr*="sub"]
- 伪类 & 伪元素
- 交互：
:hover、:active、:focus - 结构：
:first-child、:nth-child() - 内容：
::before、::after、::first-line
- 交互：
二、盒模型（Box Model）
- 内容区：
width、height - 内边距：
padding - 边框：
border - 外边距：
margin - 盒模型模式：
content-box（默认）border-box（推荐，全局：*, *::before, *::after { box-sizing: border-box; }）
三、布局（Layout）
- 标准文档流：块级（
display: block）、行内（display: inline）、行内块（inline‑block） - 浮动：
float+clear（老方法，不推荐新项目） - 定位：
static（默认）relative（相对自身）absolute（脱离文档流，相对最近定位祖先）fixed（相对视口，固定）sticky（粘性吸顶/吸底）
- Flexbox（一维布局）
- 容器：
display: flex - 主轴：
justify-content - 交叉轴：
align-items - 子项伸缩：
flex: grow shrink basis
- 容器：
- Grid（二维布局）
- 容器：
display: grid - 定义：
grid-template-columns/rows、grid-gap - 区域命名：
grid-template-areas
- 容器：
- 多栏：
column-count、column-gap（文字排版）
四、排版（Typography）
- 字体：
font-family、font-size、font-weight、line-height - 文本：
text-align、text-decoration、text-transform - 换行：
white-space、word-break、overflow-wrap
五、背景与边框（Background & Border）
- 背景：
background-colorbackground-image、background-size、background-position、background-repeat- 渐变：
linear-gradient、radial-gradient
- 边框：
border、border-radius、box-shadow
六、视觉效果（Visual Effects）
- 透明度：
opacity、rgba()/hsla()、filter: opacity() - 滤镜：
filter: blur()、brightness()、grayscale()等 - 过渡：
transition: property duration timing-function - 动画：
@keyframes name { from {…} to {…} } .anim { animation: name 1s ease-in-out infinite; }
七、响应式与适配（Responsive）
- 弹性单位：
%、vw/vh、fr - 媒体查询：
@media (max-width: 768px) { … } @media (prefers-color-scheme: dark) { … } - 移动优先：先写基础（移动），再加大屏、打印等特定规则
八、实用技巧
- 隐藏元素：
- 完全移除：
display: none; - 可见性隐藏：
visibility: hidden;
- 完全移除：
- 清除浮动：
clearfix或overflow: auto/hidden; - 自动编号：CSS 计数器（
counter-reset/increment） - 图像拼合：Sprite +
background-position - 可访问性：关注
:focus、aria-*，保证键盘、屏幕阅读器友好
九、性能优化
- 减少重排：慎用
display切换； - 利用 GPU：运动属性（
transform、opacity）； - 合并/压缩：CSS 文件最小化；
- 缓存：合理使用
cache-control、版本化资源； - 按需加载：Critical CSS 内嵌，次要样式异步加载；
十、最佳实践
- 语义化 HTML + 分层命名（BEM、SMACSS）
- 布局与组件分离：容器级布局（Grid/Flex），组件内部样式共存
- 使用预处理器/后处理器：Sass、PostCSS、Autoprefixer
- 避免
!important：只作紧急“救急”方案 - 持续迭代 & 文档：保持样式可读、可维护
以上就是一份覆盖全面的 CSS 技术速查表，可在开发中随手查阅与应用。祝你写出简洁、高效、美观的样式！