综述
-
一个长度值由一个数字和一个单位组成，诸如
10px、2em等。 -
数字和单位之间不能出现空格。
-
如果长度值为0，则可以省略单位。
-
对于某些CSS样式的样式值，允许使用负长度值。
-
长度值有两种类型：绝对长度值和相对长度值。
绝对长度值
- 不建议在屏幕上使用绝对长度值，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印布局（print layout）。
| 绝对长度值 | 描述 |
|---|---|
1px |
长度值是1个像素 |
相对长度值
- 相对长度值在不同渲染介质之间缩放表现得更好。
| 相对长度值 | 描述 |
|---|---|
1em |
长度值是当前元素字体大小的1倍 |
1rem |
长度值是根元素字体大小的1倍 |
1vw |
长度值是视口宽度的1% |
1vh |
长度值是视口高度的1% |
1% |
长度值是父元素的1% |
-
em和rem可用于创建完美的可扩展布局！ -
视口（Viewport）= 浏览器窗口的尺寸。如果视口宽
50px，则1vw=0.5px。