CSS 数据类型 - percentage

CSS <percentage> 数据类型表示另一个值的比例，通常相对于父元素或某个其他引用值。百分比通常用于各种 CSS 属性（如字体大小、宽度、高度、边距和填充）中，以指定尺寸、间距或其他比例值。

语法


<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>

打印本页