CSS 单位

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

许多 CSS 属性采用“长度”值，例如 width、margin、padding、font-size等。

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

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

h1 {  font-size: 60px;}  

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

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

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

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

绝对长度

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

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

单位	说明	尝试一下

| cm | centimeters | 尝试一下 » |

| mm | millimeters | 尝试一下 » |

| in | inches (1in = 96px = 2.54cm) | 尝试一下 » |

| px * | pixels (1px = 1/96th of 1in) | 尝试一下 » |

| pt | points (1pt = 1/72 of 1in) | 尝试一下 » |

| pc | picas (1pc = 12 pt) | 尝试一下 » |

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

单位	说明	尝试一下

| em | 相对于元素的字体大小（2em 表示当前字体大小的 2 倍） | 尝试一下 » |

| ex | 相对于当前字体的 x 高度（很少使用） | 尝试一下 » |

| ch | 相对于“0”（零）的宽度 | 尝试一下 » |

| rem | 相对于根元素的字体大小 | 尝试一下 » |

| vw | 相对于视口宽度的 1% | 尝试一下 » |

| vh | 相对于视口高度的 1% | 尝试一下 » |

| vmin | 相对于视口较小尺寸的 1% | 尝试一下 » |

| vmax | 相对于视口较大尺寸的 1% | 尝试一下 » |

| % | 相对于父元素 | 尝试一下 » |

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

表中的数字指定了完全支持长度单位。