CSS单位长度有哪些（小白必读）

在 HTML 中，无论是文字的大小，还是图片的尺寸，通常会使用像素或百分比来进行设置。在 CSS 中则有更多的选择，可以使用多种长度单位，它们主要分为两种类型：一种是相对类型，另一种是绝对类型。

1、相对类型

所谓“相对”，就是要有一个参考基础，相对于该参考基础设置尺度单位。

相对类型的单位在网页制作中有以下几种：

1) px

px 又称像素，它属于相对类型单位。

例如，在 800px×600px 分辨率的显示器中设置一幅图片的高为 100px，当同样大小的显示器换成 1024px×768px 分辨率时，就会发现图片相对变小了，因为现在的 100px 和前面的 100px 所显示出的长度已经不同了。

2) em

em 以目前字符的高度为单位。

例如，h1 {margin:2em} 就是以目前字符的两倍高度来显示。但要注意一点，em 作为尺度单位时是以 font-size 属性为参考依据的，如果没有 font-size 属性，就以浏览器默认的字符高度作为参考。

使用 em 来设置字符高度并不常用，读者了解即可。

3) rem

rem 是 root em 的简称，表示设置以网页根元素（html）的字符高度为单位。因此可以只对 html 元素设置字体大小，其他元素用 rem 单位设置百分比大小。

例如 h1{font-size:1.25rem}，一般的浏览器默认的 1rem 是 16px。

4) vw和vh

vw（viewport width）和 vh（viewport height）是基于视图窗口（viewport）的单位，它们是 CSS3 新增的单位。

1vw 等于视口宽度的 1%，1vh 等于视口高度的 1%。

2、绝对类型

所谓“绝对”，就是无论显示设备的分辨率是多少，都代表相同的长度。

例如，同一台显示器在 800px×600px 分辨率时设置一幅图片的高为 10cm，当换成 1024px×768px 分辨率时，就会发现图片还是同样的大小。

绝对类型的长度单位如下表所示：

表：绝对类型的长度单位

长度单位名	说 明
in（英寸）	不是国际标准单位，平常极少使用
cm（厘米）	国际标准单位，较少使用
mm（毫米）	国际标准单位，较少使用
pt（点数）	基本的显示单位，较少使用
pc（印刷单位）	应用在印刷行业中，1pc=12pt

以上介绍了好几种长度单位，其实在网页制作中已经默认以像素为单位，这样在交流或制作过程中都较为方便。如果在特殊领域需要用到其他单位，那么在使用时一定要加上单位（数值和单位之间不用加空格），如 10em、5in、6cm 和 20pt 等。

如果没有加单位，浏览器就会默认以像素为单位。但这也不是绝对的，对于某些浏览器来说，想以像素为单位时必须要加上 px，否则浏览器无法识别，会以默认的字体大小进行显示。

同时还要注意一个问题，大部分长度设置都要使用正数，只有少数还可以进行负数的设置。在使用负数来设置长度的时候，浏览器也有一个承受限度。当设置的值超过这个承受限度时，浏览器就会选择能承受的极限值来显示。