CSS 速查表

选择器

/* 基本 */
* { }              /* 通配符 */
div { }            /* 元素 */
.class { }          /* 类 */
#id { }             /* ID */
div.class { }       /* 元素+类 */

/* 关系 */
div p { }           /* 后代 */
div > p { }         /* 直接子代 */
h2 + p { }          /* 相邻兄弟 */
h2 ~ p { }          /* 通用兄弟 */

/* 伪类 */
:hover { }          /* 悬停 */
:focus { }          /* 聚焦 */
:first-child { }    /* 第一个子元素 */
:last-child { }     /* 最后一个 */
:nth-child(odd) { } /* 奇数 */
:nth-child(2n+1) { }/* 第1,3,5...个 */
:not(.exclude) { }  /* 排除 */

/* 伪元素 */
::before { content: "→"; }
::after { content: "←"; }
::first-letter { }
::selection { }

/* 属性选择器 */
[title] { }         /* 有 title */
[href^="https"] { } /* 以 https 开头 */
[href$=".pdf"] { }  /* 以 .pdf 结尾 */
[class*="card"] { } /* 包含 card */

盒模型

/* 全局推荐 */
*, *::before, *::after { box-sizing: border-box; }

/* margin */
margin: 10px;               /* 四周 */
margin: 10px 20px;          /* 上下 左右 */
margin: 0 auto;             /* 水平居中 */

/* padding */
padding: 10px;
padding: 10px 20px 15px 5px; /* 上 右 下 左 */

/* 宽高 */
width: 100%;
max-width: 1200px;
min-height: 100vh;

/* 边框 */
border: 1px solid #ddd;
border-radius: 8px;
border-radius: 50%;         /* 圆形 */

颜色与背景

color: #333;
color: rgb(51, 51, 51);
color: rgba(0, 0, 0, 0.5);  /* 半透明 */
color: hsl(0, 0%, 20%);

background: #f0f0f0;
background: url(bg.jpg) no-repeat center/cover;
background: linear-gradient(to right, red, blue);

文本

text-align: center;      /* left/center/right/justify */
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  /* 溢出省略号 */

/* 阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

字体

font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;        /* normal/bold/100-900 */
font-style: italic;
font: italic bold 16px/1.5 Arial;  /* 简写 */

定位

position: static;         /* 默认 */
position: relative;       /* 相对自己 */
position: absolute;       /* 相对定位祖先 */
position: fixed;          /* 相对视口 */
position: sticky;         /* 粘性定位 */
top: 0; left: 0;
z-index: 10;              /* 层叠 */

Flexbox

/* 容器 */
display: flex;
flex-direction: row;            /* row/column */
justify-content: center;        /* 主轴对齐 */
align-items: center;            /* 交叉轴对齐 */
flex-wrap: wrap;                /* 换行 */
gap: 20px;                      /* 间距 */

/* 子项 */
flex: 1;                        /* 等分 */
flex-grow: 1;                   /* 放大比例 */
flex-shrink: 0;                 /* 不缩小 */
align-self: center;             /* 单独对齐 */

Grid

display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr auto;
gap: 20px;

/* 子项 */
grid-column: 1 / 3;              /* 跨列 */
grid-row: 2 / 4;                 /* 跨行 */

/* 区域命名 */
grid-template-areas: "header header" "nav main";

过渡与动画

transition: all 0.3s ease;
transition: transform 0.3s, opacity 0.2s;

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
animation: fadeIn 0.5s ease forwards;
animation: spin 1s linear infinite;

媒体查询

@media (max-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 768px) and (max-width: 1023px) { }
@media (prefers-color-scheme: dark) { }