css相对长度

70次阅读
没有评论

在 CSS 中,相对长度是相对于其他长度单位或其他元素尺寸的单位。常用的相对长度单位包括 em、rem、% 等。

em 单位表示相对于元素的字体大小。例如,如果一个元素的字体大小为 16px,设置它的宽度为 10em,则宽度将为 160px(10*16)。rem 单位与 em 单位类似,但是相对于根元素的字体大小而不是当前元素的字体大小。

% 单位表示相对于父元素的尺寸,例如,设置一个元素的宽度为 50%,则宽度将为父元素宽度的一半。

下面是一个使用相对长度的 HTML 页面示例,其中包含一个使用 em 作为长度单位的 div 元素:

<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
	<title>Relative Length Example</title>
	<style>
		#box {
			width: 20em;
			height: 10em;
			background-color: blue;
			font-size: 1.5em;
		}
	</style>
</head>
<body>
	<div id="box">This is a box with relative length</div>
</body>
</html>

在上面的示例中,div 元素的宽度和高度分别是 20em 和 10em,因此它的尺寸是相对于元素的字体大小而定的。同时,通过设置 font-size 为 1.5em,也使得元素内部的字体大小为 1.5 倍的默认字体大小。

正文完
 
评论(没有评论)