CSS 資料型別 - <length-percentage>

CSS 資料型別 <length-percentage> 表示一個值，該值可以是 <length> 或 <percentage>。

語法

<length-percentage> = <length> | <percentage>

CSS <length-percentage> - 基本示例

在以下示例中，<length-percentage> 資料型別用於設定內容區域的左外邊距和側邊欄的寬度，從而能夠使用相對於父容器的特定百分比來實現響應式佈局設計。

<html>
<head>
<style>
   body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
   }
   header {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 20px 0;
   }
   .sidebar {
      float: left;
      width: 25%; /* Using percentage-based width */
      background-color: #f0f0f0;
      padding: 20px;
   }
   .content {
      margin-left: 20%; /* Matching the sidebar's width */
      padding: 20px;
   }
   footer {
      clear: both;
      background-color: #333;
      color: white;
      text-align: center;
      padding: 10px 0;
   }
</style>
</head>
<body>
<header>
   <h1>Header</h1>
</header>
<div class="sidebar">
   <h2>Sidebar</h2>
   <p>This is the sidebar content.</p>
</div>
<div class="content">
   <h2>Main Content</h2>
   <p>This is the main content area.</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
<footer>
   <p>© 2023 Website</p>
</footer>
</body>
</html>

CSS <length-percentage> - 在 calc() 中使用

以下示例演示了使用 calc() 函式，其中百分比解析為長度。

   
<html>
<head>
<style>
   /* Using length-percentage data type within calc() */
   .container {
      display: flex;
   }
   .left {
      width: calc(30% - 20px); /* 30% width minus 20px gap */
      height: 20px;
      background-color: red;
      padding: 10px;
   }
   .right {
      flex: 1;
      background-color: blue;
      padding: 10px;
   }
</style>
</head>
<body>
<div class="container">
   <div class="left"></div>
   <div class="right"></div>
</div>
</body>
</html>

列印頁面