首页 > 编程笔记

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,否则浏览器无法识别,会以默认的字体大小进行显示。

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

推荐阅读