CSS 中的不同测量值

在 CSS 中，我们可以使用不同的测量值来定义元素的尺寸、间距和其他样式属性。这些测量值包括绝对单位、相对单位和百分比值等。下面将会介绍一些常用的测量值。

绝对单位

像素（px）

像素是相对于显示设备的一个点的物理尺寸，它保持了在不同设备上的一致性。在 CSS 中使用像素作为单位可以精确地控制元素的大小和位置。

示例使用方法：

width: 200px;

英寸（in）、厘米（cm）、毫米（mm）

英寸、厘米和毫米是绝对单位，它们是根据实际物理尺寸来定义的。使用这些单位可以将元素的尺寸精确地指定为实际的物理尺寸。

示例使用方法：

width: 2in;
height: 5cm;

相对单位

百分比（%）

百分比单位是相对于父元素的尺寸来定义的。使用百分比可以根据父元素的大小来调整子元素的大小。例如，如果父元素的宽度为200px，子元素的宽度为50%，那么子元素的宽度将会是100px。

示例使用方法：

width: 50%;

自适应单位（vw、vh、vmin、vmax）

自适应单位是根据视口（浏览器窗口）的尺寸来定义的。视口的尺寸可以使用视口单位来实现响应式设计。

• vw：视口宽度的百分比，1vw 等于视口宽度的 1%。
• vh：视口高度的百分比，1vh 等于视口高度的 1%。
• vmin：视口宽度和高度中较小的那个的百分比。
• vmax：视口宽度和高度中较大的那个的百分比。

示例使用方法：

width: 50vw;
height: 30vh;

其他测量值

em

em 是相对于元素自身的字体尺寸来定义的。如果一个元素的字体大小为16px，设置其宽度为2em，那么其宽度将会是32px。

示例使用方法：

width: 2em;

rem

rem 是相对于根元素（通常是 元素）的字体尺寸来定义的。使用 rem 可以方便地实现整体缩放效果。

示例使用方法：

font-size: 1.2rem;

总结

本文介绍了在 CSS 中常用的测量值，包括绝对单位、相对单位和百分比值等。了解这些测量值的特性，能够更好地控制元素的尺寸和布局，实现丰富多变的界面效果。

参考链接：MDN Web 文档 - CSS 的尺寸单位