CSS 中有哪些尺寸单位

在 CSS（层叠样式表）中，尺寸单位是控制网页元素大小、间距和位置的关键因素。了解不同的尺寸单位及其应用场景，对于创建精确、美观且响应式的网页设计至关重要。

首先是绝对单位。像素（px）是最常用的绝对单位，它代表屏幕上的一个固定点。无论页面如何缩放，1px 的大小始终保持不变。这使得像素在需要精确控制元素大小时非常有用，例如图标、固定宽度的容器等。但像素缺乏灵活性，在不同设备上显示效果可能不一致。点（pt）主要用于印刷领域，1pt 约等于 1/72 英寸。在网页设计中，点的使用相对较少，因为网页显示的设备屏幕分辨率差异较大。英寸（in）、厘米（cm）和毫米（mm）同样是绝对单位，直接对应现实世界的物理尺寸。然而，由于屏幕分辨率的多样性，这些单位在网页布局中并不常用。

相对单位则更具灵活性，能够根据不同的上下文环境进行调整。em 单位是相对于父元素的字体大小。例如，如果父元素的字体大小是 16px，那么 1em 就等于 16px。使用 em 单位可以实现基于字体大小的相对布局，当字体大小发生变化时，相关元素的尺寸也会相应调整。rem 单位是相对于根元素（html 元素）的字体大小。这意味着无论元素嵌套多深，它的尺寸都只与根元素的字体大小有关，使得全局布局的控制更加方便。百分比（%）也是常用的相对单位，它可以相对于父元素的宽度、高度、字体大小等进行计算。在创建响应式布局时，百分比单位能让元素根据父容器的大小自动调整尺寸，适应不同的屏幕宽度。

视口单位是 CSS3 引入的新单位，用于创建基于视口大小的响应式设计。视口宽度（vw）和视口高度（vh）分别相对于浏览器视口的宽度和高度。例如，1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。视口最小尺寸（vmin）和视口最大尺寸（vmax）则取视口宽度和高度中的较小值或较大值作为参考。

CSS 中的尺寸单位丰富多样，每种单位都有其独特的用途和优势。在实际项目中，需要根据具体需求和设计目标，灵活选择合适的尺寸单位，以实现最佳的网页布局和用户体验。