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 |