CSS 数据类型 - length

CSS <length>数据类型是 a 表示距离或度量值。它是值的通用术语，可以用各种单位表示，例如像素（px）、ems （em）、rems （rem）、百分比（%）、英寸（in）、厘米（cm）、毫米（mm）、点（pt）和异食癖（pc）等。

此数据类型可以应用于一系列 CSS 属性，包括字体大小、文本阴影、边框宽度、高度、边距、填充和宽度。

语法


<number><unit>

<number> 和一组单位在 <length> 数据类型中排在第一位;单元之间没有空格。
如果 number 为 0，则无需指定单位。
这些单位表示对其他长度（如字符大小、行高或视口大小）的测量值，可以是绝对的，也可以是相对的。通过使用相对长度单位，可以更轻松地在各种输出上下文中缩放样式表。

CSS <length> - 相对长度单位

此处列出的相对长度单位基于字体和视口。

基于字体的相对长度单位

通过比较元素或其父元素的当前应用字体中特定字符或字体属性的大小，字体长度确定 <length> 值。


<length> = cap
<length> = ch
<length> = em
<length> = ex
<length> = ic
<length> = lh
<length> = rem	
<length> = rlh

基于视口的相对长度单位

四种视口大小与视口百分比长度单位相关联：小、大、动态和默认。它们适应不断变化的浏览器界面，在界面调整大小或缩小时修改内容的可见性。


/* Small viewport */
<length> = sv*

/* Large viewport */
<length> = lv*

/* Dynamic viewport */
<length> = dv*

/* Viewport- percentage length values scaled according to height and width of containing block */
<length> = svh | lvh | dvh
<length> = svw | lvw | dvw
<length> = vmax
<length> = vmin
<length> = svb | lvb | dvb
<length> = svi | lvb | dvb

容器查询长度单位

使用容器查询设置容器样式时，允许的长度与查询容器的尺寸成正比。


<length> = cqw
<length> = cqh
<length> = cqi	
<length> = cqb
<length> = cqmin
<length> = cqmax

绝对长度单位

当输出介质的物理特性是已知的时，例如对于印刷布局的物理测量，由绝对长度单位表示。


<length> = px
<length> = cm	
<length> = mm	
<length> = Q	
<length> = in	
<length> = pc
<length> = pt

CSS <length> - 比较长度

在以下示例中，用户可以输入各种长度值，所选长度将动态显示在结果条上。

在输入框中输入有效的长度值（例如，“300px”、“50%”、“30vw”），以动态检查结果栏中的长度。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	 	 	 margin: 50px;
	 	 	 padding: 50px;
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 height: 50vh;
	 	 	 background-color: #ecf0f1;	
	 	}
	 	#inputContainer {
	 	 	 display: flex;
	 	 	 align-items: center;
	 	 	 margin-bottom: 20px;
	 	}
	 	#inputField {
	 	 	 padding: 12px;	
	 	 	 font-size: 16px;
	 	 	 margin-right: 10px;
	 	 	 border: 1px solid #3498db;
	 	 	 border-radius: 4px;
	 	 	 outline: none;
	 	}
	 	#inputField::placeholder {
	 	 	 color: #95a5a6;
	 	}
	 	#submitBtn {
	 	 	 padding: 12px 16px;	
	 	 	 font-size: 16px;
	 	 	 background-color: #3498db;	
	 	 	 color: #fff;
	 	 	 border: none;
	 	 	 border-radius: 4px;
	 	 	 cursor: pointer;
	 	 	 transition: background-color 0.3s ease;
	 	}
	 	#submitBtn:hover {
	 	 	 background-color: #2980b9;	
	 	}
	 	#resultBar {
	 	 	 width: 0;
	 	 	 height: 20px;
	 	 	 background-color: #2ecc71;	
	 	 	 transition: width 0.3s ease;
	 	 	 margin-top: 10px;
	 	}
</style>
</head>
<body>
<div id="inputContainer">
	 	<input type="text" id="inputField" placeholder="Enter length (e.g., 300px, 50%, 30vw)">
	 	<button id="submitBtn" onclick="updateResult()">Enter</button>
</div>
<div id="resultBar"></div>
<script>
	 	function updateResult() {
	 	const inputField = document.getElementById('inputField');
	 	const resultBar = document.getElementById('resultBar');
	 	const inputValue = inputField.value.trim();
	 	resultBar.style.width = inputValue;
	 	}
	 	// Trigger the updateResult function on pressing Enter key
	 	document.getElementById('inputField').addEventListener('keyup', function(event) {
	 	if (event.key === 'Enter') {
	 	updateResult();
	 	}
	 	});
</script>
</body>
</html>

CSS <length> - 不同长度单位的演示

以下示例在一个屏幕中显示一些长度单位。


<html>
<head>
<style>
	 	body {
	 	 	 font-family: 'Open Sans', sans-serif;
	 	 	 margin: 20px;
	 	 	 background-color: #f8f8f8;
	 	}
	 	h1, h2 {
	 	 	 color: #333;
	 	 	 text-align: center;
	 	 	 margin-bottom: 20px;
	 	}
	 	h3 {
	 	 	 color: #3498db;
	 	 	 text-align: center;
	 	}
	 	.length-examples {
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: flex-start;
	 	 	 flex-wrap: wrap;
	 	}
	 	.box {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	 	 border: 2px solid #3498db;
	 	 	 margin: 20px;
	 	 	 box-sizing: border-box;
	 	 	 background-color: #ecf0f1;
	 	 	 display: flex;
	 	 	 justify-content: center;
	 	 	 align-items: center;
	 	 	 font-weight: bold;
	 	 	 color: #333;
	 	 	 transition: transform 0.3s ease-in-out;
	 	}
	 	.box:hover {
	 	 	 transform: scale(1.1);
	 	}
	 	.px-example {
	 	 	 width: 100px;
	 	 	 height: 100px;
	 	}
	 	.em-example {
	 	 	 font-size: 1.5em;
	 	}
	 	.rem-example {
	 	 	 font-size: 1.5rem;
	 	}
	 	.percent-example {
	 	 	 width: 50%;
	 	 	 height: 50px;
	 	 	 background-color: #3498db;
	 	}
</style>
</head>
<body>
<h1>Exploring Different Length Units in CSS</h1>
<div class="length-examples">
<div class="length-example">
	 	<h3>Pixel (px)</h3>
	 	<div class="box px-example">100px</div>
	 	<div class="box px-example">100px</div>
</div>
<div class="length-example">
	 	<h3>Em (em)</h3>
	 	<div class="box em-example">1.5em</div>
	 	<div class="box em-example">1.5em</div>
</div>
<div class="length-example">
	 	<h3>Rem (rem)</h3>
	 	<div class="box rem-example">1.5rem</div>
	 	<div class="box rem-example">1.5rem</div>
</div>
<div class="length-example">
	 	<h3>Percentage (%)</h3>
	 	<div class="box percent-example">50%</div>
	 	<div class="box percent-example">50%</div>
</div>
</div>
</body>
</html>

打印本页