Question

我正在了解CSS Grid布局，the article使用以下符号：

repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

我不清楚[] <> ? +

的平均值

这是符号标准还是有名字？如果是这样，我在哪里可以学习如何解释它？

Answer 1

这些符号并非CSS Grid Layout规范所独有。

它们用于所有CSS属性的定义。

有关完整说明，请参阅CSS Values and Units Module规范。

特别是，请参阅以下部分，其中解释了每种符号的含义。

2. Value Definition Syntax

此处描述的语法用于定义有效值集   用于CSS属性。属性值可以包含一个或多个组件。

有关此类语法的解释，请阅读Backus-Naur 。

Answer 2

以下代码表示您需要用于repeat()的模板：

repeat( [ <positive-integer> ] , [ <line-names>? <track-size> ]+ <line-names>? )

打破这一点，有问题的组件意味着以下内容：

[]表示必需参数。显然你需要提供一些重复的东西，以及它应该多久重复一次。 第一个参数是重复的次数，显然需要是正整数。 第二个参数是要重复的内容。
<>表示其中包含的内容是占位符。文档试图通过指定明显的描述符（如positive-integer来澄清这些组件，但希望您填写值。
?表示可选参数。任何直接跟随问号的参数都是可选的。也就是说，您没有需要为正在重复的内容提供line-names。
+表示一个或多个。第二个<line-names>是结束点。如果提供，repeat()将仅到达该行。未提供时，它将继续<positive-integer>中指定的值。基本上，与?一样，+告诉您可以提供终点，但不必如此。

如您所链接的文档中的模板正下方所示，使用repeat()的示例代码将为：

grid-template-columns: repeat(4, 30px 100px);

与说法相同：

grid-template-columns: 30px 100px 30px 100px 30px 100px 30px 100px;

这是因为第二个参数（字符串30px 100px）重复次数与第一个参数（4）指定的次数相同。此示例中未提供行名称或结束点，如最常见的用例场景中的情况。

有关CSS Grid repeat()的更多信息，请访问 Alligator.io 。

希望这有帮助！：）