使用 CSS 样式化布局包装器

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

关于网络,有两件事经常让我印象深刻:实现同一目标的方法有很多种,以及即使是最简单的事情,也需要考虑很多因素

处理包装器元素绝对在这两个列表中。包装器(或容器或其他名称)非常常见——尤其是在建立网格布局和其内部元素的边界时——因此很容易将其视为理所当然,并在使用它们时没有退一步思考它们是如何工作的、我们为什么要使用它们以及如何有效地使用它们。

Ahmed Shadeed 撰写了我见过的关于包装器最详尽的文章。在深入探讨大量关于使用包装器的注意事项和技巧之前,他首先对它们进行了简要概述,包括

  • 何时使用它们
  • 如何调整它们的大小
  • 定位它们
  • 添加边距和填充
  • 使用 CSS 网格和其他 display
  • 跳出包装器
  • 使用 CSS 自定义属性

如果您查看文章中的图片,它讲述了一个非常酷的故事。

直接链接 →