CSS 中的尺寸(Dimension)通常用于定义元素的大小、宽度、高度等。以下是一些常用的 CSS 尺寸单位:
- 像素(Pixels,px):最常用的单位之一,表示屏幕上的一个像素点。例如:
width: 200px;
- 百分比(Percentage,%):相对于父元素的尺寸的百分比。例如,如果父元素的宽度是 200px,子元素的宽度设置为 50%,则子元素的宽度将为 100px。
- 视窗宽度单位(Viewport Width,vw):相对于视口(浏览器窗口)宽度的百分比,1vw 等于视口宽度的 1%。例如,
width: 50vw;
表示元素宽度为视口宽度的一半。 - 视窗高度单位(Viewport Height,vh):与视口高度相对应的百分比单位。例如,
height: 80vh;
表示元素高度为视口高度的 80%。 - 根元素字体大小(Root em,rem):相对于根元素(html)的字体大小。例如,如果根元素的字体大小为 16px,则
font-size: 1.5rem;
表示元素的字体大小为 1.5 倍的根元素字体大小,即 24px。 - 字符单位(Character Units,ch):字符“0”的宽度,通常是等于数字零的宽度。例如,
width: 20ch;
表示元素宽度为 20 个字符宽度。 - 最小宽度单位(Minimum Width,min-width) 和 最大宽度单位(Maximum Width,max-width):分别用于设置元素的最小宽度和最大宽度。
- 最小高度单位(Minimum Height,min-height) 和 最大高度单位(Maximum Height,max-height):分别用于设置元素的最小高度和最大高度。
这些单位可以单独使用,也可以与数值结合在一起使用,如 width: 50%;
, height: 100px;
, font-size: 1.2rem;
等。