点击下方链接查看参与活动有机会领取 iphone
我的第一个开源项目：前端逐梦之旅与开源荣耀之巅 - vue-CSDN博客
UnoCSS 是一个高性能、高度可定制的原子化 CSS 框架，它提供了丰富的原子类来快速构建现代 Web 界面。本文将详细介绍 UnoCSS 的核心类及其使用方法，帮助您快速上手并高效开发。
一、布局类 (Layout)
1.1 Flex 布局
Flex 布局是创建响应式界面的强大工具，UnoCSS 提供了一系列原子类来控制弹性容器和子元素。
核心类名及属性：
| 类名 | 对应 CSS | 使用场景 |
|---|---|---|
flex | display: flex | 创建弹性容器 |
flex-row | flex-direction: row | 水平排列子元素 |
flex-col | flex-direction: column | 垂直排列子元素 |
flex-col-reverse | flex-direction: column-reverse | 垂直排列子元素反转 |
justify-start | justify-content: flex-start | 主轴起始对齐 |
justify-between | justify-content: space-between | 两端对齐 |
items-center | align-items: center | 交叉轴居中对齐 |
gap-4 | gap: 1rem | 子元素间距控制 |
示例代码：
html
<div> |
<div>Item A</div> |
<div>Item B</div> |
</div> |
1.2 Grid 布局
Grid 布局适合复杂的二维布局，UnoCSS 提供了强大的网格系统。
核心类名及属性：
| 类名 | 对应 CSS | 使用场景 |
|---|---|---|
grid | display: grid | 创建网格容器 |
grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)) | 3等分列布局 |
col-span-2 | grid-column: span 2 | 跨越2列 |
gap-x-6 | column-gap: 1.5rem | 列间距控制 |
响应式网格示例：
html
<!-- 移动端垂直布局 --> |
<div> |
<h3>overall significantly reduced</h3> |
<div v-for="(item, index) in features" :key="index" |
class="bg-white p-4 rounded-lg shadow-xs flex flex-col gap-4"> |
<div> |
<div>{ { item.title }}</div> |
<div>{ { item.text }}</div> |
</div> |
<hr> |
<div>{ { item.raise }}</div> |
</div> |
</div> |
<!-- PC端网格布局 --> |
<div> |
<div v-for="(item, index) in features" :key="index" |
class="bg-white p-6 rounded-xl shadow-sm flex flex-col gap-6"> |
<div> |
<div> |
<h3>{ { item.title }}</h3> |
<p>{ { item.text }}</p> |
</div> |
<svg>...</svg> |
</div> |
<div>{ { item.raise }}</div> |
</div> |
</div> |
1.3 定位 (Position)
定位类用于控制元素在文档流中的位置。
核心类名及属性：
| 类名 | 对应 CSS | 使用场景 |
|---|---|---|
relative | position: relative | 相对定位容器 |
absolute | position: absolute | 绝对定位元素 |
top-1/2 | top: 50% | 垂直居中定位 |
left-0 | left: 0 | 贴左定位 |
| translate-y-[-50%] | transform: translateY(-50%) | 向上移动自身的50% |
z-10 | z-index: 10 | 层级控制 |
居中弹窗示例：
html
<div> |
<div> |
居中弹窗 |
</div> |
</div> |
1.4 字体大小类名
UnoCSS 提供了一系列基于常见需求的预设字体大小类名，包括：
- 极小文本：
text-xs（如font-size: 0.75rem;） - 小文本：
text-sm（如font-size: 0.875rem;） - 默认文本：
text-base（默认大小，通常无需显式声明） - 中等文本：
text-lg（如font-size: 1.125rem;） - 大文本：
text-xl（如font-size: 1.25rem;） - 超大文本：
text-2xl到text-9xl（如text-2xl对应font-size: 1.5rem;，text-9xl对应更大的值）
示例：
<p>极小文本</p> |
<p>默认文本</p> |
<h1>超大标题</h1> |
1.4.2、自定义字体大小
如果预设值无法满足需求，可以通过以下方式自定义字体大小：
直接指定数值
使用text-[size]格式，支持px、em
