css有哪些单位

67次阅读
没有评论

CSS中有很多不同的单位,它们用于度量各种不同类型的值,例如长度、角度、时间、频率等。以下是一些常见的CSS单位:

  • 像素(px):最常用的长度单位,表示像素。
  • 百分比(%):相对于父元素的长度或宽度。
  • em:相对于当前元素的字体大小。
  • rem:相对于根元素(即html元素)的字体大小。
  • 角度单位:deg、rad、grad、turn等,用于测量旋转角度。
  • 时间单位:s、ms,用于测量动画或转换的持续时间。
  • 频率单位:Hz、kHz,用于测量音频或视频频率。
  • vh和vw:相对于视口高度和宽度的百分比。
  • vmin和vmax:相对于视口高度和宽度的最小值和最大值。

下面是一个简单的示例,演示如何使用各种CSS单位来设置元素的样式:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Units Example</title>
	<style>
		.box {
			width: 300px;
			height: 200px;
			background-color: #eee;
			border: 2px solid #333;
			margin: 20px;
			padding: 20px;
			font-size: 16px;
		}

		.box2 {
			width: 50%;
			height: 50%;
			background-color: #ccc;
			border: 1em solid #333;
			margin: 2em;
			padding: 1rem;
			font-size: 1.5rem;
		}

		.box3 {
			width: 30vw;
			height: 30vh;
			background-color: #aaa;
			border: 10px solid #333;
			margin: 5vmin;
			padding: 2vmax;
			font-size: 2vw;
		}
	</style>
</head>
<body>
	<div class="box">
		<p>This box has fixed dimensions of 300px by 200px.</p>
	</div>

	<div class="box2">
		<p>This box has a width and height of 50% of its parent element, and a border of 1em.</p>
	</div>

	<div class="box3">
		<p>This box has a width and height of 30vw and 30vh, a border of 10px, and margins and padding of 5vmin and 2vmax respectively.</p>
	</div>
</body>
</html>

在上面的示例中,我们使用了各种CSS单位来设置三个具有不同样式的元素,每个元素都有自己的宽度、高度、边框、边距和内边距。这应该为您提供了一些关于各种CSS单位的基本理解。

正文完
 
评论(没有评论)