前端必知必会-CSS单位

---

CSS 单位

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

许多 CSS 属性都采用“长度”值，例如宽度、边距、填充、字体大小等。

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

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

h1 {
  font-size: 60px;
}

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

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

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

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

绝对长度

绝对长度单位是固定的，用其中任何一种表示的长度都将显示为该大小。

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

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1in 的 1/96)
pt .	点 (1pt = 1in 的 1/72)
pc	派卡 (1pc = 12 pt)

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

相对长度

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

单位	描述
em	相对于元素的字体大小（2em 表示当前字体大小的 2 倍）
ex	相对于当前字体的 x 高度（很少使用）
ch	相对于“0”（零）的宽度
rem	相对于根元素的字体大小
vw	相对于视口宽度的 1%*
vh	相对于视口高度的 1%*
vmin	相对于视口较小尺寸的 1%*
vmax	相对于视口较大尺寸的 1%*
%	相对于父元素
提示：em 和 rem 单位在创建完美可扩展的布局时非常实用！

• 视口 = 浏览器窗口大小。如果视口宽度为 50 厘米，则 1vw = 0.5 厘米。

---

总结

本文介绍了的CSS单位使用，如有问题欢迎私信和评论