CSS 数据类型 - <percentage>

CSS 的<percentage>数据类型表示另一个值的比例，通常相对于父元素或其他参考值。百分比经常用于各种 CSS 属性（例如font-size、width、height、margin和padding）来指定尺寸、间距或其他比例值。

语法

<number>%

一个<number>和百分号 (%) 构成<percentage>数据类型。可选地在前面添加一个 + 或 - 符号，但并非所有属性都允许负值。与其他尺寸类型不同，CSS 尺寸在符号和数字之间没有空格。

CSS <percentage> - 字体大小

以下示例演示了使用<percentage>数据类型来设置字体大小。

 <html>
<head>
<style>
   body, html {
      margin: 0;
      padding: 0;
   }
   .container {
      width: 90%; /* Set container width to 90% of the viewport width */
      background-color: #f0f0f0;
      margin: 40px auto; 
   }
   .text {
      font-size: 100%; /* Default font size (16px) */
      text-align: center;
      margin: 20px 0;
   }
   .text-smaller {
      font-size: 80%; /* Font size 80% of the default size */
      color: red;
   }
   .text-larger {
      font-size: 120%; /* Font size 120% of the default size */
      color: blue;
   }
</style>
</head>
<body>
<div class="container">
   <p class="text">Font Size with Percentage</p>
   <p class="text text-smaller">Smaller Font Size</p>
   <p class="text text-larger">Larger Font Size</p>
</div>
</body>
</html>

CSS <percentage> - 盒子大小

以下示例演示了使用<percentage>数据类型来改变容器和盒子的尺寸。

<html>
<head>
<style>
   body, html {
      margin: 0;
      padding: 0;
   }  
   .container {
      width: 70%; /* Set container width to 70% of the viewport width */
      margin: 20px auto; 
      background-color: #f4f4f4; 
      padding: 20px; 
   }   
   .box {
      width: 40%; /* Box width set to 40% of its container */
      height: 200px;
      background-color: #3498db; 
      color: white;
      text-align: center;
      line-height: 200px;
      margin: 0 auto 20px; 
   }
   .box:nth-child(2) {
      width: 60%; /* Box width set to 60% of its container */
      height: 160px;
      background-color: #e74c3c; 
      line-height: 160px;
   }
</style>
</head>
<body>
<div class="container">
<div class="box">
   <p>Box 1 - 40% of container width</p>
</div>
<div class="box">
   <p>Box 2 - 60% of container width</p>
</div>
</div>
</body>
</html>

打印页面