CSS <length> 数据类型表示距离或测量值。它是一个值的通用术语，可以用各种单位来表示，例如像素（px）、em（em）、rem（rem）、百分比（%）、英寸（in）、厘米（cm）、毫米（mm) 、点 (pt) 和 picas (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 基于视口的相对长度单位
四种视口大小与视口百分比长度单位相关联:小、大、动态和默认。它们适应不断变化的浏览器界面，在界面调整大小或缩小时修改内容的可见性。
/* 小视口 */
<length> = sv* /* 大视口 */
<length> = lv* /* 动态视口 */
<length> = dv* /* 视口 - 根据包含块的高度和宽度缩放的百分比长度值 */
<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;
}
//按Enter键触发updateResult函数
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>探索 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>