CSS 数据类型 - <length>

CSS 的 <length> 数据类型表示距离或测量值。它是可以以各种单位表示的值的通用术语，例如像素 (px)、em (em)、rem (rem)、百分比 (%)、英寸 (in)、厘米 (cm)、毫米 (mm)、磅 (pt) 和 pica (pc) 等。

此数据类型可以应用于一系列 CSS 属性，包括 font-size、text-shadow、border-width、height、margin、padding 和 width。

语法

<number><unit>

<number> 和一组单位在 <length> 数据类型中首先出现；单位之间没有空格。
如果数字为 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>

打印页面