CSS 数据类型

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%; /* 将容器宽度设置为视口宽度的 90% */
      background-color: #f0f0f0;
      margin: 40px auto; 
   }
   .text {
      font-size: 100%; /* 默认字体大小 (16px) */
      text-align: center;
      margin: 20px 0;
   }
   .text-smaller {
      font-size: 80%; /* 字体大小默认大小的80% */
      color: red;
   }
   .text-larger {
      font-size: 120%; /* 字体大小默认大小的120% */
      color: blue;
   }
</style>
</head>
<body>
<div class="container">
   <p class="text">字体大小与百分比</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%; /* 将容器宽度设置为视口宽度的 70% */
      margin: 20px auto; 
      background-color: #f4f4f4; 
      padding: 20px; 
   }   
   .box {
      width: 40%; /* 盒子宽度设置为其容器的 40% */
      height: 200px;
      background-color: #3498db; 
      color: white;
      text-align: center;
      line-height: 200px;
      margin: 0 auto 20px; 
   }
   .box:nth-child(2) {
      width: 60%; /* 盒子宽度设置为其容器的 60% */
      height: 160px;
      background-color: #e74c3c; 
      line-height: 160px;
   }
</style>
</head>
<body>
<div class="container">
<div class="box">
   <p>Box 1 - 容器宽度的 40%</p>
</div>
<div class="box">
   <p>Box 2 - 容器宽度的 60%</p>
</div>
</div>
</body>
</html>