CSS 单位

在 CSS 中,单位是一个很基础的概念,许多属性都要用到单位,比如高度、宽度、边距、字体大小等,了解长度的单位对学习其他属性很有帮助。

在 CSS 中,单位是一个很基础的概念,许多属性都要用到单位,比如高度、宽度、边距、字体大小等,了解长度的单位对学习其他属性很有帮助。

用到尺寸的 CSS 属性有:height, width, padding, margin, font-size, border-width 等。

而表示尺寸大小的单位有好几种,我门要根据实际情况选择合适的单位。

尺寸大小通过一个数字后跟一个尺寸单位表示,例如10px, 2em等。数字和单位之间不能出现空格。但是,如果值为  0,可以省略单位。

对于某些 CSS 属性的尺寸,允许负值。

有两种类型的长度单位:绝对相对

绝对长度

绝对长度单位是固定的。

不建议在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果输出介质已知,则可以使用它们,例如用于打印布局。

单位 说明
cm 厘米
mm 毫米
in 英寸 (1in = 96px = 2.54cm)
px 像素 (1px = 1in/96)
pt 点 (1pt = 1in/72)
pc 派卡 (1pc = 12 点 = 1in/6)

! 像素 (px) 与查看设备有关。对于低 dpi 设备,1px 是显示器的一个设备像素点。对于打印机和高分辨率屏幕,1px 可能意味着多个像素点。

相对长度

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

单位 说明
em 相对于元素的 font-size (2em 就是当前字体大小的 2 倍)
ex 相对于当前字体字母 x 的高度 (很少用)
ch 相对于数字 0 的宽度
rem 相对于根元素的字体大小
vw 相对于 viewport 宽度, 1vm = viewport 宽度的 1%
vh 相对于 viewport 高度, 1vh = viewport 高度的 1%
vmin 相对于 viewport ,取 vh 和 vw 的小值
vmax 相对于 viewport ,取 vh 和 vw 的大值
% 相对于父元素,按百分比

提示: em 和 rem 单位在创建完美可扩展的布局方面非常实用!

浏览器支持

表中的数字指定了第一个完全支持对应的长度单位的浏览器版本。

单位 Chrome IE FireFox Safari Opera
em, ex, %, px, cm, mm, in, pt, pc 1.0 3.0 1.0 1.0 3.5
ch 27.0 9.0 1.0 7.0 20.0
rem 4.0 9.0 3.6 4.1 11.6
vh, vw 20.0 9.0 19.0 6.0 20.0
vmin 20.0 12.0 19.0 6.0 20.0
vmax 26.0 16.0 19.0 7.0 20.0