面试题：CSS框架对比之基础特性

主要差异

Bootstrap
- 预设类丰富：提供大量预定义的类用于常见的布局场景。例如，通过container类创建响应式容器，row类定义行，col - [断点] - [宽度]类定义列，如col - md - 6表示在中等屏幕及以上宽度占6列（12列网格系统）。
- 移动优先：采用移动优先的设计理念，从最小屏幕开始构建布局，然后随着屏幕尺寸增大进行适配。
- 自定义相对复杂：虽然可以通过Sass等进行自定义，但相对来说需要更多的配置和学习成本。
Tailwind CSS
- 功能类为主：它更倾向于使用功能类来构建布局。例如，使用grid - cols - [数量]来定义网格列数，如grid - cols - 3表示将容器分为3列。
- 高度可定制：通过简单修改配置文件就可以轻松定制主题、断点等，适合打造个性化布局。
- 上手难度较高：由于类名基于功能，对于新手来说，理解和记忆类名以及组合使用可能较难，不像Bootstrap那样有明显的语义化布局类。
Foundation
- 灵活性高：提供了类似的网格系统，如container、row和column类。但它在响应式设计方面更灵活，支持更多的断点配置。
- 内置工具多：除了基本网格系统，还提供了像flex - grid（基于Flexbox的网格）等工具，方便创建复杂布局。
- 文档丰富但庞大：文档很详细，但对于只想快速上手网格系统的开发者来说，可能会觉得过于繁杂。

实际布局选择

简单通用布局且快速开发：如果项目需要快速搭建一个常见的响应式布局，如企业官网、博客等，Bootstrap是不错的选择。例如，要创建一个两栏布局，在大屏幕上两栏平分，小屏幕上单栏显示，可以这样写：

<div class="container">
    <div class="row">
        <div class="col - md - 6 col - sm - 12">
            左边内容
        </div>
        <div class="col - md - 6 col - sm - 12">
            右边内容
        </div>
    </div>
</div>

高度个性化布局：当项目需要高度个性化的设计，并且开发者对CSS有较好的掌握，Tailwind CSS更合适。比如要创建一个自定义列间距且不规则列宽的布局：

<div class="grid grid - cols - 3 gap - 4">
    <div class="col - span - 1">内容1</div>
    <div class="col - span - 2">内容2</div>
</div>

复杂响应式布局和更多工具需求：对于大型应用程序或复杂的UI设计，需要更多的响应式控制和内置工具时，Foundation更有优势。例如，使用Flex - grid创建一个自适应且可排序的卡片布局：

<div class="container">
    <div class="flex - grid">
        <div class="cell small - 6 medium - 3">卡片1</div>
        <div class="cell small - 6 medium - 3">卡片2</div>
        <div class="cell small - 6 medium - 3">卡片3</div>
        <div class="cell small - 6 medium - 3">卡片4</div>
    </div>
</div>

面试题：CSS框架对比之基础特性

知识考点

面试题答案

主要差异

实际布局选择