CSS 单位

CSS 有几种不同的单位来表示长度。

许多 CSS 属性采用 "length" 值，例如width,margin,padding,font-size， ETC。

长度是一个数字后跟一个长度单位，例如10px,2em， ETC。

使用 px（像素）设置不同的长度值：

h1 {
font-size: 60px;
}

p {
font-size: 25px;
line-height: 50px;
}

笔记：数字和单位之间不能出现空格。但是，如果该值为0，单位可以省略。

对于某些 CSS 属性，允许使用负长度。

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

绝对长度

绝对长度单位是固定的，并且以任何这些单位表示的长度都将准确地显示为该尺寸。

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸差异很大。但是，如果输出介质已知，例如打印布局，则可以使用它们。

* 像素 (px) 是相对于观看设备而言的。对于低 dpi 设备，1px 是显示器的一个设备像素（点）。对于打印机和高分辨率屏幕，1px 意味着多个设备像素。

相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放得更好。

Unit	Description
em	Relative to the font-size of the element (2em means 2 times the size of the current font)	尝试一下
ex	Relative to the x-height of the current font (rarely used)	尝试一下
ch	Relative to the width of the "0" (zero)	尝试一下
rem	Relative to font-size of the root element	尝试一下
vw	Relative to 1% of the width of the viewport*	尝试一下
vh	Relative to 1% of the height of the viewport*	尝试一下
vmin	Relative to 1% of viewport's* smaller dimension	尝试一下
vmax	Relative to 1% of viewport's* larger dimension	尝试一下
%	Relative to the parent element	尝试一下

提示：em 和 rem 单位在创建完美可扩展的布局方面非常实用！
* 视口 = 浏览器窗口大小。如果视口宽 50 厘米，则 1vw = 0.5 厘米。

表中的数字指定完全支持长度单位的第一个浏览器版本。