HTML CSS 的单位有几种表示长度的不同单位。
许多 CSS 属性接受“长度”值,诸如 width、margin、padding、font-size 等。
长度是一个后面跟着长度单位的数字,诸如 10px、2em 等。
数字和单位之间不能出现空格。但是,如果值为 0,则可以省略单位。
对于某些 CSS 属性,允许使用负的长度。
长度单位有两种类型:绝对单位和相对单位。
绝对长度
单位 | 描述 |
---|---|
cm | 厘米 |
mm | 毫米 |
in | 英寸 (1in = 96px = 2.54cm) |
px * | 像素 (1px = 1/96th of 1in) |
pt | 点 (1pt = 1/72 of 1in) |
pc | 派卡 (1pc = 12 pt) |
相对长度
单位 | 描述 |
---|---|
em | 相对于元素的字体大小(font-size)(2em 表示当前字体大小的 2 倍) |
ex | 相对于当前字体的 x-height(极少使用) |
ch | 相对于 “0”(零)的宽度 |
rem | 相对于根元素的字体大小(font-size) |
vw | 相对于视口*宽度的 1% |
vh | 相对于视口*高度的 1% |
vmin | 相对于视口*较小尺寸的 1% |
vmax | 相对于视口*较大尺寸的 1% |
% | 相对于父元素 |
* 视口(Viewport)= 浏览器窗口的尺寸。如果视口为 50 厘米宽,则 1vw = 0.5 厘米。
浏览器支持
表格中的数字注明了完全支持该长度单位的首个浏览器版本。
长度单位 | 谷歌浏览器 | IE浏览器 | 火狐浏览器 |
---|---|---|---|
em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 |
ch | 27.0 | 9.0 | 1.0 |
rem | 4.0 | 9.0 | 3.6 |
vh, vw | 20.0 | 9.0 | 19.0 |
vmin | 20.0 | 12.0 | 19.0 |
vmax | 26.0 | 16.0 | 19.0 |
如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!