CSS的单位种类和区别

学完之后简单总结一下css里面的一些单位以及它们之间的区别

CSS 单位

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

许多 CSS 属性接受“长度”值，诸如 width、margin、padding、font-size 等。

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

实例

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

h1 {
  font-size: 60px;
}

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

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

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

css的单位分为相对和绝对两种类型

---

绝对长度

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

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

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

px： 绝对单位，页面按精确像素展示。一像素其实就是屏幕中的一个小点，整个屏幕都是由无数个小点组成的。

---

相对长度

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

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 "0"（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	相对于视口宽度的 1%
vh	相对于视口高度的 1%
vmin	相对于视口较小尺寸的 1％
vmax	相对于视口较大尺寸的 1％
%	相对于父元素

em 和 rem 单元可用于创建完美的可扩展布局！

视口（Viewport）= 浏览器窗口的尺寸。