CSS 收集ing...

Flexbox基础布局

水平垂直居中（弹窗/加载动画）

.center-flex { display: flex;

justify-content: center;

align-items: center;

height: 100vh; }

三栏自适应布局

.three-column { display: flex; }

.sidebar { flex: 0 0 200px; }

.main-content { flex: 1; margin: 0 20px; }

Grid响应式布局

自适应网格（产品展示）

.grid-container { display: grid;

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

gap: 20px; }

复杂区域布局

.complex-layout { display: grid;

grid-template-areas: "header header header" "sidebar main aside" "footer footer footer"; }

🎨背景

background: #f8f9fa; background: linear-gradient(135deg, #667eea, #764ba2);

background: url(bg.png) center/cover;

边框

border: 1px solid #e0e0e0; border-left: 4px solid #3498db; ==左侧强调线

border-bottom: 2px dashed #e74c3c; border-radius: 8px; ==圆角

border-radius: 20px 4px 20px 4px; ==不规则圆角

轮廓（不占空间） */

outline: 2px solid #ff6b6b; outline-offset: 4px;

🖱️交互状态

p { cursor: pointer; user-select: none; --禁止选中文字}

p:hover { color: #e74c3c; background: #f0f0f0;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(0,0,0,0.15); }

p:active{transform: scale(0.98);}

p:first-child{} --第一个段落

p:last-child{} --最后一个段落

p:nth-child(odd){} --奇数段落

📐布局与尺寸

宽度限制

max-width: 600px; width: 80%; min-width: 200px;

溢出处理

overflow: hidden; overflow-x: auto;--横向滚动

盒模型

box-sizing: border-box;

✂️文本截断

单行省略号

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

多行省略号（3行）

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

overflow: hidden;

换行规则

ord-break: break-all; --强制断词

word-wrap: break-word; --长单词换行

white-space: pre-wrap; --保留空格和换行

📝文字样式

字体

font-family: "PingFang SC", "Microsoft YaHei", sans-serif;

font-size: 16px;font-weight: 400; --normal | bold | 100-900

font-style: italic; --normal | italic

font-variant: small-caps; 小型大写字母

文字颜色

color: #333;color: rgba(0, 0, 0, 0.85);

文字装饰

text-decoration: underline;

text-decoration: line-through;

text-decoration: underline wavy #e74c3c; --波浪下划线

文字阴影

text-shadow: 2px 2px 4px rgba(0,0,0,0.3);

大小写转换

text-transform: uppercase; --lowercase | capitalize

📏段落间距与对齐

行高

line-height: 1.8; line-height: 28px;

段间距

margin: 16px 0; margin-top: 20px; margin-bottom: 10px;

内边距

padding: 12px 20px; padding: 1em 2em;

对齐

text-align: left/center/right/justify(两端对齐);

首行缩进

text-indent: 2em;

字间距

letter-spacing: 1px;

词间距（英文）

word-spacing: 2px;

margin: 0 auto = 让一个块级元素(如 div)整体水平居中

margin: 0 auto 自身居中于父容器

vertical-align: middle = 垂直方向对齐

flex-direction: column; = 纵向排列

flex-wrap: wrap; =换行

justify-content: center;居中

justify-content: center/flex-start左/flex-end右/space-between两端对齐中间平分/space-around每个元素两边有间距; --水平居中

align-items: center/flex-start上/flex-end下/stretch拉伸填满(默认); --垂直居中(对flex子元素生效)

🎯实用组合示例

引用块风格

.quote { padding: 16px 24px;

border-left: 4px solid #3498db;

background: #f0f6ff; color: #2c3e50;

font-style: italic;

border-radius: 0 8px 8px 0;

line-height: 1.8; }

卡片风格

.card-text { padding: 20px; background: #fff;

border-radius: 12px;

box-shadow: 0 2px 16px rgba(0,0,0,0.08);

line-height: 1.8; color: #555;

transition: all 0.3s; }

.card-text:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.12);

transform: translateY(-4px); }

高亮提示

.alert { padding: 12px 20px; background: #fff3cd;

border: 1px solid #ffc107;

border-radius: 6px;

color: #856404;

⚡特效

阴影

box-shadow: 0 2px 12px rgba(0,0,0,0.1);

box-shadow: 0 4px 20px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.1);

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); ==内阴影

渐变文字

background: linear-gradient(to right, #ff6b6b, #feca57);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

透明度

opacity: 0.8;

变换

transform: rotate(2deg); transform: scale(1.05); transform: skewX(-5deg); transform: translateY(-4px);

过渡动画

transition: all 0.3s ease;

滤镜

filter: blur(1px);

filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));

区别

p =段落(换行+段间距; div =块级容器(无间距纯容器); span =行内容器(不换行); h1 =标题(加粗+不同大小); br =换行(无间距)

Columns(内容自动分流)

div class="two-columns"

.two-columns { column-count: 2; --分2列

column-gap: 40px; --列间距

column-rule: 1px solid #e0e0e0; --中间分隔线}

div class="container"

div class="left"

div class="right"

.container { display: flex; gap: 20px; --两列间距}

.left { flex: 1; --占1份 background: #e8f4fd; padding: 20px; }

.right { flex: 1; --占1份 background: #fff3e0; padding: 20px; }

不等宽比例：.left { flex: 2; } ==占 2/3 .right { flex: 1; } ==占 1/3

或者用固定宽度 + 自适应 .left { width: 300px; flex-shrink: 0; } .right { flex: 1; }

响应式（手机端自动变上下）：.container { display: flex; gap: 20px; } @media (max-width: 768px) { .container { flex-direction: column; --窄屏变上下} }

最强大：Grid 布局

.container { display: grid; grid-template-columns: 1fr 1fr; --两列等宽 gap: 20px; }

不等宽 .container { grid-template-columns: 300px 1fr; --左侧固定300，右侧自适应

grid-template-columns: 2fr 1fr; ==2:1 比例

grid-template-columns: 200px 1fr 200px; ==三列，中间自适应

侧边栏 + 主体

.layout { display: flex; min-height: 100vh; }

.sidebar { width: 250px; background: #2c3e50; color: #fff; }

.main { flex: 1; padding: 30px; }

布局方向

display: flex; 横向

flex-direction: column; 子元素竖向排列 ↓

flex-direction: row; 子元素横向排列 →

<div style="display: flex;"> <p段落1/p>(p横向排列)

flex-direction:column;

让容器内的子元素‌从上到下垂直排列‌，同时将主轴方向改为垂直方向（必须先给父容器设置 display: flex 或 display: inline-flex）

主流断点方案

@media (max-width: 576px)--手机

@media (max-width: 768px)--平板竖屏}

@media (max-width: 992px)--平板横屏/小笔记本}

@media (max-width: 1200px)--桌面}

@media (min-width: 1400px)--大屏优化}

阅读类窄版

.article { max-width: 680px;==理想阅读宽度：60~75个字符

margin: 0 auto; font-size: 17px; line-height: 1.8;

通栏 + 内容区分离

背景通栏，内容居中限制宽度 .section { width: 100%; ==背景铺满 background: #f5f5f5;

.section-inner { max-width: 1200px; margin: 0 auto; padding: 60px 20px;