常用 CSS 样式速查表，涵盖了现代 Web 开发中最核心的样式属性与常用值，适合作为日常开发参考。
1. 盒模型与尺寸
| 属性 | 说明 | 常用值 |
|---|
width / height | 宽高 | auto, 100%, 50px, 50vw, calc(100% - 20px) |
max-width / min-width | 最大/最小宽度 | 100%, 800px |
margin | 外边距 | 0 auto（水平居中）, 10px, 5% |
padding | 内边距 | 10px, 1em, 5% |
box-sizing | 盒模型计算方式 | border-box（推荐）, content-box |
overflow | 溢出处理 | hidden, auto, scroll |
aspect-ratio | 宽高比 | 16/9, 1/1 |
2. 布局方式
常规显示模式（display）
| 值 | 说明 |
|---|
block | 块级元素，独占一行 |
inline | 行内元素，宽度随内容 |
inline-block | 行内块，可设宽高且不换行 |
none | 隐藏元素（不占位） |
flex | 弹性盒布局 |
grid | 网格布局 |
定位（position）
| 属性 | 说明 | 常用值 |
|---|
position | 定位方式 | relative, absolute, fixed, sticky |
top / right / bottom / left | 偏移量 | 0, 10px, 50% |
z-index | 层叠顺序 | 1, 100, auto |
Flex 布局
| 属性（容器） | 常用值 |
|---|
flex-direction | row, column, row-reverse |
justify-content | center, space-between, space-around, flex-start, flex-end |
align-items | center, stretch, flex-start, flex-end |
flex-wrap | wrap, nowrap |
gap | 10px, 1rem |
| 属性（项目） | 常用值 |
|---|
flex | 1（占满剩余空间）, auto |
order | -1, 1（调整顺序） |
align-self | center, flex-end |
Grid 布局
| 属性（容器） | 常用值 |
|---|
grid-template-columns | repeat(3,1fr), 200px 1fr, auto |
grid-template-rows | 100px auto |
gap | 10px |
justify-items / align-items | center, stretch |
| 属性（项目） | 常用值 |
|---|
grid-column | span 2, 1/3 |
grid-row | span 2 |
浮动与清除（现代布局已少用，但需了解）
| 属性 | 说明 | 常用值 |
|---|
float | 浮动 | left, right |
clear | 清除浮动 | both, left, right |
3. 文本样式
| 属性 | 说明 | 常用值 |
|---|
color | 文字颜色 | #333, rgb(0,0,0), red |
font-family | 字体族 | "PingFang SC", "Microsoft YaHei", sans-serif |
font-size | 字号 | 16px, 1rem, 1.2em |
font-weight | 字重 | normal, bold, 400, 700 |
line-height | 行高 | 1.5, 24px, 150% |
text-align | 水平对齐 | left, center, right, justify |
text-decoration | 文本装饰 | none, underline, line-through |
text-transform | 大小写转换 | uppercase, lowercase, capitalize |
letter-spacing | 字间距 | 1px, 0.1em |
word-break | 换行规则 | break-all, keep-all, break-word |
white-space | 空白处理 | nowrap, pre-wrap, normal |
text-overflow | 溢出省略号 | ellipsis（常配合 overflow:hidden + white-space:nowrap） |
vertical-align | 垂直对齐（行内/表格） | middle, top, bottom |
实用文本截断
css
/* 单行省略 */.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;}/* 多行省略（WebKit） */.line-clamp-2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;}
4. 背景与渐变
| 属性 | 说明 | 常用值 |
|---|
background-color | 背景颜色 | #f0f0f0, rgba(0,0,0,0.5) |
background-image | 背景图片/渐变 | url('...'), linear-gradient(...) |
background-size | 尺寸 | cover, contain, 100% auto |
background-position | 位置 | center, top left, 50% 50% |
background-repeat | 重复 | no-repeat, repeat-x |
background-attachment | 滚动行为 | fixed, scroll |
background 简写 | 一次设置多个 | #fff url('...') no-repeat center/cover |
渐变示例
css
/* 线性渐变 */background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);/* 径向渐变 */background: radial-gradient(circle at center, #ff9a9e, #fad0c4);
5. 边框与阴影
| 属性 | 说明 | 常用值 |
|---|
border | 边框简写 | 1px solid #ccc, none |
border-radius | 圆角 | 4px, 50%（圆形）, 8px 0 8px 0 |
box-shadow | 盒阴影 | 0 2px 8px rgba(0,0,0,0.1)（外阴影）
inset 0 0 5px #ccc（内阴影） |
outline | 轮廓（不占位） | 2px solid red, none |
outline-offset | 轮廓偏移 | 2px |
6. 变换与过渡动画
Transform（2D/3D变换）
| 属性 | 常用值 |
|---|
transform | translate(10px, 50%) / rotate(45deg) / scale(1.2) / skew(10deg) |
transform-origin | center, top left |
Transition（过渡）
css
transition: all 0.3s ease;/* 分别指定：属性 时长 缓动 延迟 */transition: opacity 0.2s linear 0.1s;
Animation（关键帧动画）
css
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }}.animate {
animation: fadeIn 0.5s ease-in-out forwards;}
7. 其他视觉效果
| 属性 | 说明 | 常用值 |
|---|
opacity | 不透明度 | 0（透明）→ 1（不透明） |
cursor | 鼠标样式 | pointer, default, not-allowed, move |
pointer-events | 穿透点击 | none（让元素不响应鼠标事件） |
filter | 滤镜效果 | blur(5px), brightness(0.8), grayscale(100%) |
backdrop-filter | 背景滤镜（毛玻璃效果） | blur(10px) |
mix-blend-mode | 混合模式 | multiply, screen, overlay |
8. 表格与列表样式
表格
| 属性 | 说明 | 常用值 |
|---|
border-collapse | 边框合并 | collapse, separate |
caption-side | 表格标题位置 | top, bottom |
table-layout | 布局算法 | fixed（固定布局，提升渲染速度） |
列表
| 属性 | 说明 | 常用值 |
|---|
list-style-type | 列表标记 | none, disc, decimal |
list-style-position | 标记位置 | inside, outside |
9. 响应式与单位
常用相对单位
| 单位 | 说明 |
|---|
rem | 相对于根元素 font-size |
em | 相对于当前元素 font-size |
vw / vh | 视口宽度的 1% / 视口高度的 1% |
vmin / vmax | 视口较小/较大边长的 1% |
% | 相对于父元素同属性值 |
calc() | 动态计算，例如 calc(100% - 20px) |
媒体查询示例
css
/* 移动端优先 */.container { width: 100%; }@media (min-width: 768px) {
.container { width: 750px; }}@media (min-width: 1200px) {
.container { width: 1170px; }}/* 暗色模式 */@media (prefers-color-scheme: dark) {
body { background: #222; color: #fff; }}
10. 实用技巧速查
| 需求 | 实现方式 |
|---|
| 水平居中（块元素） | margin: 0 auto; + 有宽度的块 |
| 水平居中（内联/行内块） | 父级 text-align: center; |
| 垂直居中（单行文本） | 父级 line-height 等于 height |
| 垂直居中（Flex） | 父级 display: flex; align-items: center; |
| 垂直居中（Grid） | 父级 display: grid; align-content: center; |
| 水平垂直居中（绝对定位） | position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); |
| 隐藏元素（不占位） | display: none; |
| 隐藏元素（占位，不可见） | visibility: hidden; |
| 清除浮动（clearfix） | .clearfix::after { content: ""; display: table; clear: both; }
|
