CSS进阶(一)：单位

1 CSS单位

1.1 绝对单位

CSS单位分为两大类：绝对单位 和 相对单位。绝对单位使用的是物理度量单位，大小是固定的。在前端开发中一般不会用到绝对单位，了解即可。

绝对单位说明cm厘米mm毫米in英寸pt(poin)印刷的点数，磅pc(pica)1pc=12pt

1.2 相对单位

相对单位说明：

px像素

%百分比

em当前元素字体大小的倍数

rem根元素字体大小的倍数

一、px(像素)

px（pixel）像素，是分辨率的基本单位，是屏幕显示最小的点。像素不像是厘米，属于物理上绝对的大小单位，它可以很大，也可以很小。

如果画面由很多且很小的显示点构成，那么画面就很清晰，我们称为“分辨率高”；相反，如果画面由很少且很大的显示点构成，“分辨率低”画面就模糊。

比如分辨率为“800px × 600px”，就是说计算机的显示由宽是800个像素点，高是600个像素点构成。

二、%(百分比)

CSS中支持百分比作为单位的属性大致有三大类：

width

、

height

、

font-size

根据父元素相同属性值来进行百分比计算：

比如父元素的

width:100px

，那么子元素

width:50%

，则实际宽度为

50px

；

比如父元素的

font-size:30px

，那么子元素

font-size:50%

，则实际字体大小为

15px

；

line-heigt

根据父元素的

font-size

属性值来进行百分比计算；

vertical-align

根据当前元素的

line-heigt

属性值来进行百分比计算；

三、em（当前元素字体大小的倍数）

em是当前元素字体大小的百分比，例如当前元素的

font-size:10px

时，

1em

等于

10px

。

如果当前元素没有定义

font-size

，则会基础父元素的

font-size

。如果所有祖先元素都没定义

font-size

，则会继承浏览器默认的

font-size

(所有浏览器默认的

font-size:16px

)。

『em单位的使用技巧』

实现首行缩进：text-indent:2em；

使用em作为统一单位，任何元素都不设置具体的px单位，而是指定根元素的

font-size

的倍数。但值得注意的是，如果出现多重嵌套内容时，使用em作为单位则需要重新计算；

使用em作为统一字体大小单位，当需要改变页面整体字体大小时，无需逐个修改，只改根元素的字体大小即可；

四、rem（根元素字体大小的倍数）——CSS3

rem(font size of the root element)，相对于根元素字体大小的倍数。

浏览器兼容性：除了IE8以及更早版本之外，大部分主流浏览器都支持rem。

rem布局也是移动端最常用的字体大小之一。

rem的优势：em是相对于“当前元素”的字体大小，而rem是相对于“根元素”的字体大小，从而可以避免多重嵌套导致的复杂计算。

『实际开发中，px、em和rem各自的使用场景』

国外大多数网站都使用em作为单位，W3C也建议使用em。但国内大部分网站使用px作为单位。这是由于国外的法律规定（如美国）网站必须具有兼容性，为了方便对IE早期版本的兼容，em更适合。

所以：

需要兼容IE或者其他低版本浏览器时，使用em单位；

不需要兼容IE，也不考虑移动端浏览器时，使用px单位；

需要在移动端且不考虑IE等比版本浏览器时，使用rem单位；