CSS 单位

主题

在 CSS 中，有着多种用于表示长度的单位，这些单位在样式设置中扮演着关键角色。

可用于设置长度的属性包括width、height、margin、padding、font-size、border-width等。

长度是由数字和单位组成，如12px、2em等，数字和单位之间不能有空格，如果长度为0，单位可以省略。

长度单位有两种类型：绝对长度单位 和 相对长度单位。

绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸，不适合跨平台使用。

相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同平台之间缩放表现得更好。

单位	描述	示例	TIY
`%`	相对于父元素的百分比	`width: 50%;`	试一试
`em`	相对于元素的字体大小（`font-size`）（2em 表示当前字体大小的 2 倍）	`padding: 1em;`	试一试
`rem`	rem（root em 的缩写），相对于根元素（`<html>`）的字体大小`font-size`	`font-size: 1.2rem;`	试一试
`vw`	Viewport Width，视窗宽度，1vw=视窗宽度的1%	`width: 50vw;`	试一试
`vh`	Viewport Height，视窗高度，1vh=视窗高度的1%	`height: 100vh;`	试一试
`vmin`	vw和vh中较小的那个	`font-size: 4vmin;`	试一试
`vmax`	vw和vh中较大的那个	`font-size: 4vmax;`	试一试
`ch`	相对于字符 "0" 的宽度	`width: 20ch;`	试一试

* 视口（Viewport）= 浏览器窗口的尺寸。如果视口宽 50 厘米，则 1vw = 0.5cm。

表格中的数字注明了完全支持该长度单位的首个浏览器版本。