CSS 速查表 (Cheat Sheet)

1. 基本语法

选择器 {
  属性: 值;
}

2. 选择器

p { }           /* 标签选择器 */
.title { }      /* 类选择器 */
#main { }       /* id选择器 */
div p { }       /* 后代选择器 */
a:hover { }     /* 伪类（鼠标悬停） */
p::after { }    /* 伪元素（在元素后插入内容） */

3. 文本

color: red;              /* 字体颜色 */
font-size: 16px;         /* 字号 */
font-weight: bold;       /* 加粗 */
font-style: italic;      /* 斜体 */
text-align: center;      /* 水平对齐 */
line-height: 1.5;        /* 行高 */
letter-spacing: 2px;     /* 字间距 */
text-decoration: none;   /* 去掉下划线 */

4. 背景与颜色

background-color: lightblue;
background: url(bg.png) no-repeat center / cover;
opacity: 0.8;            /* 透明度 */

5. 盒模型

width: 200px;
height: 100px;
margin: 10px auto;       /* 外边距 */
padding: 20px;           /* 内边距 */
border: 1px solid black;
border-radius: 10px;     /* 圆角 */
box-sizing: border-box;  /* 包含padding+border */

6. 布局

display: block;          /* 块 */
display: inline;         /* 行内 */
display: inline-block;   /* 行内块 */
display: flex;           /* 弹性布局 */
display: grid;           /* 网格布局 */

7. 定位

position: static;        /* 默认 */
position: relative;      /* 相对定位 */
position: absolute;      /* 绝对定位（相对父元素） */
position: fixed;         /* 固定定位 */
top: 10px; left: 20px;
z-index: 10;             /* 层级 */

8. Flex 常用属性

display: flex;
justify-content: center;     /* 主轴对齐: 左右居中 */
align-items: center;         /* 交叉轴对齐: 上下居中 */
flex-direction: row/column;  /* 横排 / 竖排 */
flex-wrap: wrap;             /* 自动换行 */
gap: 10px;                   /* 元素间距 */

9. Grid 常用属性

display: grid;
grid-template-columns: repeat(3, 1fr); /* 3列等分 */
grid-template-rows: auto;
gap: 10px;

10. 过渡 & 动画

transition: all 0.3s ease;   /* 平滑过渡 */

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.box { animation: float 2s infinite; }

11. 常用效果

box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* 阴影 */
cursor: pointer;                        /* 鼠标指针 */
overflow: hidden;                       /* 隐藏溢出 */
white-space: nowrap;                    /* 不换行 */
text-overflow: ellipsis;                /* 超出省略号 */

12. 响应式

@media (max-width: 768px) {
  body { font-size: 14px; }
}