CSS 数据类型

CSS 数据类型 <integer> 是 <number> 的独特类型，表示正整数或负整数。许多 CSS 属性和描述符都使用此数据类型，例如column-count, counter-increment, grid-column, grid-row和 z-index 属性以及范围描述符。

语法

数据类型 <integer> 由一个或多个十进制数字组成，包括 0 到 9。可以选择在其前面添加 + 或 - 符号。没有单位与整数关联。

注意:没有有效的 <integer> 值的官方范围。

/* 有效整数 */
123 /* 不带+号的正整数 */
+123 /* 带+号的正整数 */
-123 /* 负整数 */
0 /* 零 */
+0 /* 带+号的零 */
-0 /* 带-号的零 */
/*无效整数*/
123.0 /* 这是一个 <number>，而不是 <integer> */
123. /* 不允许使用小数点 */
+--123 /* 只允许有一个前导 +/- */
二十 /* 不允许使用字母 */
_2 /* 不允许使用下划线等特殊字符 */
\35 /* 不允许转义 Unicode 字符，即使它们是整数（此处：5） */
3e4 /* 不允许使用科学计数法 */

CSS <integer>: 与列计数一起使用

以下示例演示如何使用 <integer> 数据类型来定义 CSS 属性 column-count 中的列数:

<html>
<head>
<style> 
   .multicol-col-count {
      column-count: 3;
   }
</style>
</head>
<body>
   <h1>column-count 属性</h1>

   <div>
   <p class="multicol-col-count"> CSS 是“层叠样式表”的缩写。 它是一种样式表语言，用于描述用 HTML 等标记语言编写的文档的表示形式。 CSS 帮助 Web 开发人员控制网页的布局和其他视觉方面。 CSS 在现代 Web 开发中发挥着至关重要的作用，它提供了创建具有视觉吸引力、可访问性和响应式网站所需的工具。    </p>
   </div>
</body>
</html>

CSS <integer>: 与 grid-template-columns 一起使用

以下示例演示如何使用 <integer> 数据类型来定义 CSS 属性 grid-template-columns 中的列数:

<html>
<head>
<style>
   .grid {
      display: grid;
      height: 50px;
      grid-template-columns: repeat(6, 1fr);
      grid-template-rows: 50px;
   }

   .col1 {
      background-color: aqua;
      border: 2px dashed black;
   }

   .col2 {
      background-color: lightgreen;
      grid-column: 2 / 4;
      border: 2px dashed black;
   }

   .col3 {
      background-color: teal;
      grid-column: span 2 / 7;
      border: 2px dashed black;
   }
</style>
</head>
<body>
   <div class="grid">
      <div class="col1"></div>
      <div class="col2"></div>
      <div class="col3"></div>
    </div>
</body>
</html>