CSS 单位
CSS 单位
CSS 有几种不同的单位来表达长度。
许多 CSS 属性采用“长度”值,例如 width
, margin
, padding
, font-size
, ETC。
长度 是一个数字,后跟长度单位,例如10px
, 2em
, ETC。
笔记: 数字和单位之间不能出现空格。但是,如果值为0
,单位可省略。
对于某些 CSS 属性,允许负长度。
长度单位有两种类型: 绝对 和相对的.
绝对长度
绝对长度单位是固定的,用任何一个单位表示的长度都会显示为完全相同的尺寸。
不建议在屏幕上使用绝对长度单位,因为屏幕尺寸差异很大。但是,如果输出介质已知,例如打印布局,则可以使用这些单位。
单元 | 描述 |
---|---|
厘米 | 厘米 尝试一下 |
毫米 | 毫米 尝试一下 |
在 | 英寸(1in = 96px = 2.54cm) 尝试一下 |
像素* | 像素(1px = 1 英寸的 1/96) 尝试一下 |
点 | 点(1pt = 1 英寸的 1/72) 尝试一下 |
个人电脑 | 派卡 (1pc = 12 pt) 尝试一下 |
* 像素 (px) 是相对于查看设备的。对于低 dpi 设备,1px 是显示屏的一个设备像素(点)。对于打印机和高分辨率屏幕,1px 意味着多个设备像素。
相对长度
相对长度单位指定相对于另一个长度属性的长度。相对长度单位在不同的渲染媒介之间具有更好的扩展性。
单元 | 描述 | |
---|---|---|
埃姆 | 相对于元素的字体大小(2em 表示当前字体大小的 2 倍) | 尝试一下 |
前任 | 相对于当前字体的 x 高度(很少使用) | 尝试一下 |
频道 | 相对于“0”(零)的宽度 | 尝试一下 |
雷姆 | 相对于根元素的字体大小 | 尝试一下 |
大众 | 相对于视口宽度的 1%* | 尝试一下 |
気 | 相对于视口高度的 1%* | 尝试一下 |
最小速度 | 相对于视口*较小尺寸的 1% | 尝试一下 |
最大速度 | 相对于视口*较大尺寸的 1% | 尝试一下 |
% | 相对于父元素 | 尝试一下 |
提示: em 和 rem 单位对于创建完美可扩展的布局非常实用!
* 视口 = 浏览器窗口大小。如果视口宽度为 50 厘米,则 1vw = 0.5 厘米。
浏览器支持
表中的数字指定了第一个完全支持长度单位的浏览器版本。
长度单位 | |||||
---|---|---|---|---|---|
em、ex、%、px、cm、mm、in、pt、pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
频道 | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
雷姆 | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
非常, 非常 | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
最小速度 | 20.0 | 12.0 | 19.0 | 6.0 | 20.0 |
最大速度 | 26.0 | 16.0 | 19.0 | 7.0 | 20.0 |