CSS <percentage> 数据类型表示另一个值的比例，通常相对于父元素或某个其他引用值。百分比通常用于各种 CSS 属性（如字体大小、宽度、高度、边距和填充）中，以指定尺寸、间距或其他比例值。
<number>%<number>和百分比符号 （%） 共同构成 <percentage> 数据类型。单个 + 或 - 符号是可选的启动方式，尽管并非所有属性都允许负值。与其他尺寸类型不同，CSS 尺寸在元件和数字之间没有间隙。
以下示例演示了如何使用 <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>
以下示例演示了如何使用 <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>