上查看所有课程
CSS 单位定义了网页元素的尺寸、长度和度量。例如，
p {
width: 300px;
background-color: greenyellow;
}浏览器输出
在此，我们使用像素 (px) 长度单位指定了段落的 width 值。
有多种 CSS 属性，如 width、padding、margin 等，它们接受各种单位的度量值。
CSS 单位主要分为绝对单位和相对单位。
绝对单位
绝对单位是恒定的度量值，无论设备的屏幕尺寸如何，它们都保持不变。
有以下几种绝对单位：
- 像素 (px)：相当于屏幕上的一个像素。例如，
width: 100px。
- 英寸 (in)：对应物理尺寸的一英寸。例如，
height: 1in。
- 厘米 (cm)：相当于一厘米。例如，
margin: 2cm。
- 毫米 (mm)：相当于一毫米。例如，
padding: 5mm。
- 点 (pt)：等于一点（1/72 英寸）。例如，
font-size: 12pt。
绝对单位用于需要特定尺寸的元素，例如按钮、图像和徽标。
注意：首选使用绝对单位来提供特定且一致的尺寸，以确保跨设备的统一显示。
相对单位
相对单位是随屏幕尺寸或页面上其他元素而变化的度量值。
有以下几种相对单位：
- em (em)：相对于父元素的字体大小。例如，
font-size: 1em会随着父元素的字体大小而缩放。
如果父元素的字体大小为 16px，则子元素的 font-size:1em 等于 16px。
- rem (rem)：相对于根元素的字体大小，即设置给 HTML 元素的大小。例如，
margin: 2rem会根据根字体大小进行调整。
- 视口宽度 (vw)：相对于视口宽度。例如，
width: 50vw会适应视口宽度的 50%。
- 视口高度 (vh)：相对于视口高度。例如，
height: 100vh会占据整个视口（屏幕）的高度。
- 百分比 (%)：相对于容器元素。例如，
padding: 5%会根据父容器的大小进行缩放。
当我们需要在各种设备上实现灵活的尺寸和响应式设计时，首选相对单位。
例如，
body {
height: 80vh;
}这会将 body 元素的高度设置为设备屏幕（视口）总高度的 80%。
示例：绝对单位
让我们来看一个使用像素 (px) 的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Pixels</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>div.box {
width: 100px;
height: 100px;
background-color: red;
}浏览器输出
在上面的示例中，div 元素的 width 和 height 被固定设置为 100 像素，而与屏幕尺寸无关。
示例：相对单位
让我们来看一个使用百分比 (%) 的示例。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS Percentage</title>
</head>
<body>
<div class="parent">
<div class="child">Child Element</div>
Parent Element
</div>
</body>
</html>div.parent {
width: 400px;
height: 100px;
background-color: skyblue;
border: 2px solid black;
}
div.child {
width: 50%;
height: 50%;
background-color: orange;
}浏览器输出
在上面的例子中：
div.child {
width: 50%;
height: 50%;
}将子 div 的 width 和 height 设置为父 div 元素的 50%。
这意味着子元素将始终是父元素宽度的 50% 且高度也是父元素高度的 50%。