第二章：基础概念精讲 - 第三节 - Tailwind CSS 间距和布局控制

间距系统基础

1. 间距刻度

Tailwind CSS 提供了一个基于 0.25rem（4px）递增的间距系统：

// tailwind.config.js 默认间距配置
module.exports = {
    theme: {
        spacing: {
            '0': '0',
            '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
            '16': '4rem',       // 64px
// ... 更多间距
        }
    }
}

2. 间距工具类

<!-- 外边距（margin）使用 -->
<div class="m-4">所有方向外边距</div>
<div class="mx-4">水平外边距</div>
<div class="my-4">垂直外边距</div>
<div class="mt-4">上外边距</div>
<div class="mr-4">右外边距</div>
<div class="mb-4">下外边距</div>
<div class="ml-4">左外边距</div>

<!-- 内边距（padding）使用 -->
<div class="p-4">所有方向内边距</div>
<div class="px-4">水平内边距</div>
<div class="py-4">垂直内边距</div>
<div class="pt-4">上内边距</div>
<div class="pr-4">右内边距</div>
<div class="pb-4">下内边距</div>
<div class="pl-4">左内边距</div>

布局控制

1. 容器与宽度

<!-- 容器 -->
<div class="container mx-auto px-4">
    <!-- 居中的内容容器 -->
</div>

<!-- 宽度控制 -->
<div class="w-full">100%宽度</div>
<div class="w-1/2">50%宽度</div>
<div class="w-screen">视窗宽度</div>
<div class="max-w-xl">最大宽度</div>

2. 高度控制

<!-- 固定高度 -->
<div class="h-64">固定高度</div>

<!-- 最小高度 -->
<div class="min-h-screen">最小视窗高度</div>

<!-- 自适应高度 -->
<div class="h-auto">自动高度</div>

<!-- 百分比高度 -->
<div class="h-full">100%高度</div>

3. 空间分配

<!-- 使用间距工具类控制元素间距 -->
<div class="space-y-4">
    <div>第一个元素</div>
    <div>第二个元素</div>
    <div>第三个元素</div>
</div>

<!-- 水平间距 -->
<div class="space-x-4">
    <span>元素1</span>
    <span>元素2</span>
    <span>元素3</span>
</div>

高级布局技巧

1. 弹性盒布局（Flexbox）

<!-- 基础 Flex 布局 -->
<div class="flex items-center justify-between">
    <div>左侧内容</div>
    <div>右侧内容</div>
</div>

<!-- Flex 方向和换行 -->
<div class="flex flex-col md:flex-row flex-wrap">
    <div class="w-full md:w-1/3">列 1</div>
    <div class="w-full md:w-1/3">列 2</div>
    <div class="w-full md:w-1/3">列 3</div>
</div>

2. 网格布局（Grid）

<!-- 基础网格布局 -->
<div class="grid grid-cols-3 gap-4">
    <div>网格项 1</div>
    <div>网格项 2</div>
    <div>网格项 3</div>
</div>

<!-- 响应式网格 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <!-- 网格内容 -->
</div>

3. 定位控制

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

<!-- 固定定位 -->
<div class="fixed bottom-0 left-0 right-0">
    固定在底部
</div>

常见布局模式

1. 卡片布局

<!-- 卡片网格布局 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
    <!-- 卡片 1 -->
    <div class="bg-white rounded-lg shadow-lg p-6">
        <h3 class="text-xl mb-4">卡片标题</h3>
        <p class="text-gray-600">卡片内容</p>
    </div>
    <!-- 更多卡片... -->
</div>

2. 边栏布局

<!-- 响应式边栏布局 -->
<div class="flex flex-col md:flex-row">
    <!-- 侧边栏 -->
    <div class="w-full md:w-64 p-6 bg-gray-100">
        侧边栏内容
    </div>

    <!-- 主内容区 -->
    <div class="flex-1 p-6">
        主要内容
    </div>
</div>

3. 叠加布局

<!-- 叠加布局 -->
<div class="relative">
    <!-- 背景图片 -->
    <img src="background.jpg" class="w-full h-64 object-cover">

    <!-- 叠加内容 -->
    <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center">
        <h2 class="text-white text-3xl">叠加标题</h2>
    </div>
</div>

响应式间距

1. 断点控制

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

<!-- 响应式外边距 -->
<div class="mx-4 md:mx-8 lg:mx-16">
    <!-- 在不同屏幕尺寸下使用不同的水平外边距 -->
</div>

2. 动态间距

<!-- 动态间距应用 -->
<div class="space-y-4 md:space-y-6 lg:space-y-8">
    <div>第一项</div>
    <div>第二项</div>
    <div>第三项</div>
</div>

最佳实践

1. 间距使用建议

• 使用一致的间距刻度
• 避免使用任意值
• 保持响应式一致性

2. 布局规范

• 使用语义化容器
• 保持布局层级清晰
• 合理使用响应式类

3. 性能优化

• 避免过度嵌套
• 合理使用容器查询
• 优化重排重绘

总结

Tailwind CSS 的间距和布局控制系统提供了：

1. 完整的间距刻度系统
2. 灵活的布局工具类
3. 强大的响应式能力
4. 丰富的布局模式支持

通过合理运用这些特性，我们可以：

1. 构建一致的页面布局
2. 实现灵活的响应式设计
3. 提高开发效率
4. 确保视觉体验的一致性

在实际开发中，应该根据设计规范建立统一的间距和布局标准，并在团队中保持一致的使用方式。