第 2 章：核心工具类

Haiyue2025/9/1大约 8 分钟

第 2 章：核心工具类

学习目标

掌握布局相关的工具类（display、position、float等）
熟练使用 Flexbox 和 Grid 布局工具类
学会间距设置（margin、padding）和尺寸控制
理解响应式设计的断点系统

显示和定位

Display 工具类

<!-- 块级元素 -->
<div class="block">块级显示</div>

<!-- 内联元素 -->
<span class="inline">内联显示</span>

<!-- 内联块 -->
<div class="inline-block">内联块显示</div>

<!-- Flex 容器 -->
<div class="flex">Flex 容器</div>

<!-- Grid 容器 -->
<div class="grid">Grid 容器</div>

<!-- 隐藏元素 -->
<div class="hidden">隐藏元素</div>

Position 定位

<!-- 静态定位（默认） -->
<div class="static">静态定位</div>

<!-- 相对定位 -->
<div class="relative">
  <div class="absolute top-0 right-0">绝对定位子元素</div>
</div>

<!-- 固定定位 -->
<div class="fixed top-4 right-4">固定在右上角</div>

<!-- 粘性定位 -->
<div class="sticky top-0">粘性导航栏</div>

定位偏移

<div class="relative">
  <!-- 顶部偏移 -->
  <div class="absolute top-4">距离顶部 16px</div>
  
  <!-- 多方向偏移 -->
  <div class="absolute top-4 left-4">距离顶部和左侧各 16px</div>
  
  <!-- 居中定位 -->
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    完全居中
  </div>
</div>

Flexbox 布局

Flex 容器属性

<!-- 基本 Flex 容器 -->
<div class="flex">
  <div>项目 1</div>
  <div>项目 2</div>
  <div>项目 3</div>
</div>

<!-- Flex 方向 -->
<div class="flex flex-col">垂直排列</div>
<div class="flex flex-row">水平排列（默认）</div>
<div class="flex flex-row-reverse">水平反向</div>
<div class="flex flex-col-reverse">垂直反向</div>

主轴对齐（justify-content）

<!-- 主轴对齐方式 -->
<div class="flex justify-start">左对齐（默认）</div>
<div class="flex justify-center">居中对齐</div>
<div class="flex justify-end">右对齐</div>
<div class="flex justify-between">两端对齐</div>
<div class="flex justify-around">环绕对齐</div>
<div class="flex justify-evenly">均匀对齐</div>

交叉轴对齐（align-items）

<!-- 交叉轴对齐 -->
<div class="flex items-start h-24">顶部对齐</div>
<div class="flex items-center h-24">垂直居中</div>
<div class="flex items-end h-24">底部对齐</div>
<div class="flex items-stretch h-24">拉伸对齐</div>

Flex 项目属性

<div class="flex">
  <!-- Flex 增长 -->
  <div class="flex-1">自动填充剩余空间</div>
  <div class="flex-none">不增长不收缩</div>
  <div class="flex-auto">根据内容自动调整</div>
  
  <!-- 自对齐 -->
  <div class="self-start">单独顶部对齐</div>
  <div class="self-center">单独居中对齐</div>
  <div class="self-end">单独底部对齐</div>
</div>

实际应用示例

<!-- 导航栏布局 -->
<nav class="flex items-center justify-between p-4 bg-white shadow">
  <div class="flex items-center space-x-4">
    <img src="logo.png" alt="Logo" class="h-8 w-8">
    <span class="font-semibold text-lg">品牌名</span>
  </div>
  <div class="flex items-center space-x-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">联系</a>
  </div>
</nav>

<!-- 卡片布局 -->
<div class="flex flex-col bg-white rounded-lg shadow-md overflow-hidden">
  <img src="image.jpg" alt="图片" class="w-full h-48 object-cover">
  <div class="flex-1 p-4">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600 mb-4">卡片内容描述...</p>
    <div class="flex justify-between items-center">
      <span class="text-sm text-gray-500">2024-01-15</span>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        查看详情
      </button>
    </div>
  </div>
</div>

Grid 布局

基本 Grid 容器

<!-- 基本网格 -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">网格项 1</div>
  <div class="bg-blue-100 p-4">网格项 2</div>
  <div class="bg-blue-100 p-4">网格项 3</div>
  <div class="bg-blue-100 p-4">网格项 4</div>
  <div class="bg-blue-100 p-4">网格项 5</div>
  <div class="bg-blue-100 p-4">网格项 6</div>
</div>

响应式网格

<!-- 响应式列数 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
  <div class="bg-green-100 p-4">响应式网格项</div>
  <div class="bg-green-100 p-4">响应式网格项</div>
  <div class="bg-green-100 p-4">响应式网格项</div>
  <div class="bg-green-100 p-4">响应式网格项</div>
</div>

Grid 项目跨越

<div class="grid grid-cols-4 gap-4">
  <!-- 跨越 2 列 -->
  <div class="col-span-2 bg-red-100 p-4">跨越 2 列</div>
  <div class="bg-blue-100 p-4">正常项</div>
  <div class="bg-blue-100 p-4">正常项</div>
  
  <!-- 跨越整行 -->
  <div class="col-span-4 bg-yellow-100 p-4">跨越整行</div>
  
  <!-- 跨越 3 列 -->
  <div class="col-span-3 bg-green-100 p-4">跨越 3 列</div>
  <div class="bg-blue-100 p-4">正常项</div>
</div>

实际应用：博客布局

<div class="grid grid-cols-1 lg:grid-cols-4 gap-6 max-w-6xl mx-auto p-6">
  <!-- 主内容区 -->
  <main class="lg:col-span-3">
    <article class="bg-white rounded-lg shadow-md p-6 mb-6">
      <h1 class="text-2xl font-bold mb-4">文章标题</h1>
      <div class="flex items-center text-sm text-gray-600 mb-4">
        <span>作者：张三</span>
        <span class="mx-2">•</span>
        <span>2024-01-15</span>
      </div>
      <div class="prose">
        <p>文章内容...</p>
      </div>
    </article>
  </main>
  
  <!-- 侧边栏 -->
  <aside class="space-y-6">
    <div class="bg-white rounded-lg shadow-md p-4">
      <h3 class="font-semibold mb-3">热门文章</h3>
      <ul class="space-y-2">
        <li><a href="#" class="text-sm text-blue-600 hover:underline">文章 1</a></li>
        <li><a href="#" class="text-sm text-blue-600 hover:underline">文章 2</a></li>
      </ul>
    </div>
  </aside>
</div>

间距系统

Padding 内边距

<!-- 全方向内边距 -->
<div class="p-4">全方向 16px 内边距</div>

<!-- 方向性内边距 -->
<div class="pt-4">顶部内边距</div>
<div class="pr-4">右侧内边距</div>
<div class="pb-4">底部内边距</div>
<div class="pl-4">左侧内边距</div>

<!-- 轴向内边距 -->
<div class="px-4">水平内边距</div>
<div class="py-4">垂直内边距</div>

<!-- 组合使用 -->
<div class="px-6 py-3">水平 24px，垂直 12px</div>

Margin 外边距

<!-- 全方向外边距 -->
<div class="m-4">全方向 16px 外边距</div>

<!-- 自动外边距实现居中 -->
<div class="mx-auto max-w-md">水平居中的容器</div>

<!-- 负外边距 -->
<div class="mb-4">
  <div class="bg-blue-500 h-20"></div>
  <div class="bg-red-500 h-20 -mt-4">向上重叠 16px</div>
</div>

间距系统对照表

类名	间距值	像素等价
0	0	0px
px	1px	1px
0.5	0.125rem	2px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
8	2rem	32px
10	2.5rem	40px
12	3rem	48px

尺寸控制

宽度

<!-- 固定宽度 -->
<div class="w-32">固定宽度 128px</div>
<div class="w-64">固定宽度 256px</div>

<!-- 百分比宽度 -->
<div class="w-1/2">50% 宽度</div>
<div class="w-1/3">33.33% 宽度</div>
<div class="w-2/3">66.67% 宽度</div>
<div class="w-1/4">25% 宽度</div>
<div class="w-3/4">75% 宽度</div>

<!-- 特殊宽度 -->
<div class="w-full">100% 宽度</div>
<div class="w-screen">100vw 宽度</div>
<div class="w-auto">自动宽度</div>

<!-- 最大/最小宽度 -->
<div class="max-w-md">最大宽度 28rem</div>
<div class="min-w-0">最小宽度 0</div>

高度

<!-- 固定高度 -->
<div class="h-32">固定高度 128px</div>

<!-- 百分比高度 -->
<div class="h-1/2">50% 高度</div>

<!-- 特殊高度 -->
<div class="h-screen">100vh 高度</div>
<div class="h-auto">自动高度</div>

<!-- 最大/最小高度 -->
<div class="min-h-screen">最小高度 100vh</div>
<div class="max-h-64">最大高度 256px</div>

响应式设计

断点系统

断点	最小宽度	CSS
sm	640px	@media (min-width: 640px)
md	768px	@media (min-width: 768px)
lg	1024px	@media (min-width: 1024px)
xl	1280px	@media (min-width: 1280px)
2xl	1536px	@media (min-width: 1536px)

响应式工具类

<!-- 响应式显示 -->
<div class="block md:hidden">只在小屏幕显示</div>
<div class="hidden md:block">只在中等及以上屏幕显示</div>

<!-- 响应式布局 -->
<div class="flex flex-col md:flex-row">
  <!-- 小屏幕垂直排列，中等屏幕及以上水平排列 -->
</div>

<!-- 响应式尺寸 -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- 小屏幕全宽，中等屏幕半宽，大屏幕三分之一宽 -->
</div>

<!-- 响应式间距 -->
<div class="p-4 md:p-6 lg:p-8">
  <!-- 不同屏幕尺寸不同的内边距 -->
</div>

响应式实践示例

<!-- 响应式卡片网格 -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 p-4">
  <div class="bg-white rounded-lg shadow-md p-6">
    <h3 class="text-lg font-semibold mb-2">卡片标题</h3>
    <p class="text-gray-600 text-sm md:text-base">
      响应式文本大小
    </p>
    <button class="w-full sm:w-auto mt-4 px-4 py-2 bg-blue-500 text-white rounded">
      按钮
    </button>
  </div>
</div>

<!-- 响应式导航 -->
<nav class="flex flex-col md:flex-row items-start md:items-center justify-between p-4">
  <div class="mb-4 md:mb-0">
    <h1 class="text-xl font-bold">品牌名</h1>
  </div>
  <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6">
    <a href="#" class="text-gray-600 hover:text-gray-900">首页</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">关于</a>
    <a href="#" class="text-gray-600 hover:text-gray-900">联系</a>
  </div>
</nav>

响应式设计原则

移动优先：先设计小屏幕，然后向上扩展
渐进增强：基础功能在所有设备上都可用
断点选择：根据内容而非设备选择断点
测试验证：在真实设备上测试响应式效果

小结

通过本章学习，你应该掌握了：

布局基础：display、position 等基本布局工具类
Flexbox：现代化的一维布局解决方案
Grid：强大的二维布局系统
间距控制：padding、margin 的系统化使用
尺寸控制：宽度、高度的灵活设置
响应式设计：基于断点的适配策略

这些工具类构成了 Tailwind CSS 的核心，是构建复杂布局的基础。下一章我们将学习样式和美化相关的工具类。