导入
找到合适的僵尸清理工具
查看 CSS 属性的对比。
何时使用何种方法
掌握了这些知识后，你有多种方式来实现复杂的 CSS 布局。了解在不同情况下哪种技术最为合适非常重要。下表总结了相关信息：
| 属性 | 复杂度级别 | 擅长之处 | 不擅长之处 |
|---|---|---|---|
| 表格（Tables） | 低至高，取决于实现方式 | 在仅需适配单一屏幕尺寸且能针对该尺寸进行设计的情况下，可实现固定且复杂的布局（但在当今多屏幕环境下几乎不可能实现） | 任何响应式布局；同时内容与视觉结构无法分离 |
| 定位（Positioning） | 低 | 将少量设计或内容元素放置在非正常流中的特殊位置，或仅轻微偏移常规布局 | 任何复杂布局 |
| 浮动（Floating） | 低 | 实现内容环绕图片或其他视觉元素；支持两列甚至三列布局，只要各列内容彼此独立即可 | 任何复杂布局 |
| 多列（Columns） | 中等至低 | 将大段文本划分为连续的多列 | 包含非文本内容的复杂布局 |
| 弹性盒子（Flexbox） | 中等 | 水平或垂直排列项目，并能适应多种屏幕尺寸 | 同时在多个方向上对齐项目并保持对齐 |
| 网格布局（Grid） | 高 | 处理复杂布局，同时在两个方向上保持元素对齐 | 小型布局（过于复杂，不适合快速需求；在页面级或区块级布局中表现最佳） |
需要注意的是，这些方法都是构建复杂布局的优秀工具，你也可以将它们结合使用。