更新记录
- 2023-09-12:删除部分章节。
CSS单位
总体来说,CSS单位可以分为绝对单位和相对单位两大类。
绝对单位
绝对单位多用于传统页面印刷中,极少用于前端开发。
相对单位
在CSS中,相对单位定义的大小是不固定的,一般是相对于其他长度而言。在CSS中,常用的相对单位如下表所示:
相对单位 | 说明 |
---|---|
px | 像素 |
% | 百分比 |
em | 1em等于“当前元素”字体大小 |
rem | 1rem等于“根元素”字体大小 |
vm | 视口宽度的百分比 |
vh | 视口高度的百分比 |
vmax(仅作了解) | 视口宽高中较大的百分比 |
vmin(仅作了解) | 视口宽高中较小的百分比 |
像素(px)
百分比(%)
em
在CSS中,em是相对于“当前元素”的字体大小而言的。其中,1em就等于“当前元素”字体大小。这里的字体大小指的是以px为单位的font-size值。
注意:如果当前元素的font-size没有定义,则当前元素会继承父元素的font-size。如果当前元素的所有祖先元素都没有定义font-size,则当前元素会继承浏览器默认的font-size。其中,所有浏览器默认的font-size的值都是16px。
为了简化font-size的计算,我们在CSS中提前声明body{font-size:62.5%;}。通过这个声明,我们可以使默认字体大小变为16px×62.5%=10px,此时1em=10px。
在CSS中,使用em作为单位有以下3个小技巧:
- 首行缩进使用text-indent:2em来实现。
- 使用em作为统一单位:在实际开发中,对于em我们一般需要计算两次——第一次,当前元素font-size属性的px值;第二次,当前元素其他属性(如width、height等)的px值,因为如果当前元素其他属性要以em为单位,就得以当前元素的font-size值再计算一次。
- 使用em作为字体大小单位:如果想控制一个页面的字体大小,最佳选择是使用em作为单位,当需要改变页面整体的文字大小时,我们只需要改变根元素字体大小即可。这个特点在跨平台网站开发中有着明显的优势。