前端 CSS 与 Tailwind 快速笔记
🧩 前端 CSS 与 Tailwind 面试快速笔记
🧑🤝🧑 头像
flex→ 水平排列头像-space-x-1→ 头像之间轻微重叠overflow-hidden→ 隐藏溢出部分保持边缘整洁relative + absolute→ 父元素设置定位上下文；子元素（圆点）固定在角落outline→ 简单的线条边框ring→ 基于阴影的边框，可调节厚度（ring-2 ring-white）dark:前缀 → 应用暗色模式样式（class="dark"或媒体查询）
🧠 核心要点：
flex = 布局，relative = 定位，dark: = 主题切换
🏷️ 徽章
inline-flex+items-center→ 行内行为 + 垂直居中rounded-md→ 矩形加圆角rounded-full→ 完全的胶囊形状- “带边框” → 使用
ring-1 ring-inset产生细微层次感 - “扁平” → 无边框，简洁极简风格
group-hover:→ 实现父子元素间的悬停效果共享- 状态点 →
<span>+<svg>+ 颜色类（fill-green-500）
🧠 对比要点：
border = 层次感 / 分隔 flat = 简洁 / 极简 rounded-full = 胶囊形状 inline-flex = 行内 + flex 对齐
🔽 下拉菜单
<div>
<button>Menu <svg>▼</svg></button>
<div>
<a>Item</a>
<form><button>Sign out</button></form>
</div>
</div>
<a>→ 导航行为<select>→ 表单选择行为divide-y→ 添加分隔线- 父元素使用
relative，下拉面板使用absolute
🧠 模式：
下拉菜单 = 相对定位父元素 + 绝对定位面板
🔘 按钮
<button class="inline-flex items-center gap-2 rounded-md bg-indigo-600 text-white">
<svg></svg> Button
</button>
- 主按钮 → 主要操作
- 次要按钮 → 中性 / 轮廓操作
- 柔和按钮 → 低强调背景
- 圆形按钮 → 仅图标按钮（
rounded-full）
🧠 提示：
<button>语义化且可聚焦。 不要将<a>用于按钮行为。
🔔 通知与警告
结构层次：
fixed inset-0 → 屏幕容器
flex-col → 通知堆叠
白色圆角盒子 → 单个通知卡片
包含：图标 + 文本 + 关闭按钮
| 类型 | 描述 |
|---|---|
| 警告 | 行内阻塞消息 |
| 通知 | 浮动非阻塞消息 |
🧠 快速区别：
警告 = 中断性 通知 = 信息性 flex = 布局，shadow = 层次
📍 定位
| 属性 | 含义 |
|---|---|
static | 默认，无移动 |
relative | 轻微移动但保持在文档流中 |
absolute | 脱离文档流，相对于父元素 |
fixed | 固定在视口 |
sticky | 滚动到阈值后粘性定位 |
🧠 记忆口诀：
static（静止），relative（轻微移动），absolute（浮动），fixed（固定），sticky（半固定）
🧭 导航 / 分页
<nav>
<ul class="flex gap-2">
<li><a>1</a></li>
<li><a class="bg-accent/10 font-semibold">2</a></li>
</ul>
</nav>
flex水平分布页码bg-accent/10标记当前页
🧠 常见问题：
如何使用 flex 和边框工具构建分页布局。
🪟 模态对话框
<div class="fixed inset-0 flex items-center justify-center bg-black/30">
<div class="bg-white rounded-lg p-6 shadow-lg">
<h2>Title</h2>
<p>Content</p>
<div class="flex justify-end gap-2">
<button>Cancel</button>
<button>Confirm</button>
</div>
</div>
</div>
- 背景层 →
fixed - 内容盒子 →
shadow + rounded - 按钮 → 通过
justify-end右对齐
🧠 提示：
使用
flex实现垂直和水平居中。
🧱 语义化 HTML
| 标签 | 含义 | 用途 |
|---|---|---|
<dl> | 定义列表 | 键值对数据 |
<dt> | 术语 | 键 / 标签 |
<dd> | 描述 | 值 |
<ul> | 无序列表 | 容器 |
<li> | 列表项 | 单个条目 |
🧠 面试要点：
根据内容类型使用语义化标签（列表、表格或键值对）。
📝 表单与输入
| 类别 | 类型 | 示例 |
|---|---|---|
| 文本 | text, email, password | 输入框 |
| 选择 | checkbox, radio, file | 多选/单选 |
| 时间 | date, time, month | 选择器 |
| 隐藏 | hidden | token 或 ID 字段 |
属性含义：
| 属性 | 用途 |
|---|---|
id | 连接到 <label> |
name | 表单字段名称 |
value | 提交的值 |
🧠 常见错误：
同组单选按钮必须共享相同的
name才能互斥。
⚙️ Tailwind 核心面试概念
| 概念 | 要点 |
|---|---|
flex vs inline-flex | 块级容器 vs 行内容器 |
relative + absolute | 子元素相对父元素定位 |
outline vs ring | 扁平线条 vs 分层阴影 |
dark: 模式 | 通过 .dark 类或媒体查询切换 |
rounded-md vs rounded-full | 柔和矩形 vs 胶囊形状 |
border vs flat | 层次感 vs 极简主义 |
group-hover | 悬停状态共享 |
flex-1 | 均匀分配空间 |
响应式 grid | 1 列 → 2 列 → 3 列布局 |
💡 总结（快速复习）
- Flex 排列，Relative 定位，Ring 增加层次。
- Inline-flex 用于行内对齐，Rounded-full = 胶囊形状。
- Dark: 切换主题，Group-hover 共享悬停状态。
- Alert 阻塞，Notification 浮动。
<dl>= 键值对，<ul>= 列表。- Radio 共享 name，Checkbox 不共享。