第二章：基础概念精讲 - 第三节 - 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. 间距工具类

所有方向外边距
水平外边距
垂直外边距
上外边距
右外边距
下外边距
左外边距


所有方向内边距
水平内边距
垂直内边距
上内边距
右内边距
下内边距
左内边距

布局控制

1. 容器与宽度

    



100%宽度
50%宽度
视窗宽度
最大宽度

2. 高度控制

固定高度


最小视窗高度


自动高度


100%高度

3. 空间分配

    
第一个元素
    
第二个元素
    
第三个元素




    元素1
    元素2
    元素3

高级布局技巧

1. 弹性盒布局（Flexbox）

    
左侧内容
    
右侧内容




    
列 1
    
列 2
    
列 3

2. 网格布局（Grid）

    
网格项 1
    
网格项 2
    
网格项 3




    

3. 定位控制

    

        定位元素
    




    固定在底部

常见布局模式

1. 卡片布局

    
    

        
卡片标题
        
卡片内容
    
    

2. 边栏布局

    
    

        侧边栏内容
    

    
    

        主要内容
    

3. 叠加布局

    
    

    
    

        
叠加标题
    

响应式间距

1. 断点控制

2. 动态间距

    
第一项
    
第二项
    
第三项

最佳实践

1. 间距使用建议

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

2. 布局规范

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

3. 性能优化

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

总结

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

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

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

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

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