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>

列印頁面