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>

本页