CSS 数据类型 - <integer>

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

语法

数据类型<integer>由一个或多个十进制数字组成，包括 0 到 9。它前面可以选择性地加上+或-符号。整数不带单位。

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

/* Valid integers */
123         /* Positive integer without a + sign */

+123        /* Positive integer with a + sign */

-123        /* Negative integer */

0           /* Zero */

+0          /* Zero with + sign */

-0          /* Zero with - sign */

/*Invalid integers */
123.0        /* This is a <number>, not an <integer> */

123.         /* Decimal points are not allowed */

+--123       /* Only one leading +/- is allowed */

twenty       /* Letters are not allowed */

_2           /* Special characters like underscore are not allowed */

\35          /* Escaped Unicode characters are not allowed, even if they are an integer (here: 5) */

3e4          /* Scientific notation is not allowed */

CSS <integer> - 用于 column-count

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

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

   <div>
   <p class="multicol-col-count">
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
   </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>

打印页面