CSS中的各种单位
| 单位 | 描述 | 原文 |
|---|---|---|
| em | 它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； | Represents the calculated font-size of the element. If used on the font-size property itself, it represents the inherited font-size of the element. |
| ex | 依赖于英文子母小 x 的高度 | Represents the x-height of the element's font. On fonts with the "x" letter, this is generally the height of lowercase letters in the font; 1ex ≈ 0.5em in many fonts. |
| cap | 表示元素字体的“顶高”（大写字母的大写字母）。 | Represents the "cap height" (nominal height of capital letters) of the element’s font. |
| ic | 等于使用预先测量的“水”(CJK水表意文字,U + 6 c34)字形字体用于呈现它 | Equal to the used advance measure of the "水" (CJK water ideograph, U+6C34) glyph found in the font used to render it. |
| lh | 等于所使用元素的行高属性的计算值，转换为绝对长度。 | Equal to the computed value of the line-height property of the element on which it is used, converted to an absolute length. |
| rlh | 等于根元素(通常)上的行高属性的计算值，转换为绝对长度。当用于根元素的字体大小或行高属性时，它指的是属性的初始值 | Equal to the computed value of the line-height property on the root element (typically <html>), converted to an absolute length. When used on the font-size or line-height properties of the root element, it refers to the properties' initial value. |
| ch | 数字 0 的宽度 | Represents the width, or more precisely the advance measure, of the glyph "0" (zero, the Unicode character U+0030) in the element's font. |
| rem | 根元素（html）的 font-size | Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this). |
| vw | viewpoint width，视窗宽度，1vw=视窗宽度的1% | Equal to 1% of the width of the viewport's initial containing block. |
| vh | viewpoint height，视窗高度，1vh=视窗高度的1% | Represents the "cap height" (nominal height of capital letters) of the element’s font |
| vmin | vw和vh中较小的那个。 | Equal to the smaller of |
| vmax | vw和vh中较大的那个。 | Equal to the larger of vw and vh. |
| vi | 在根元素的内嵌轴的方向上，等于初始包含块大小的1%。 | Equal to 1% of the size of the initial containing block, in the direction of the root element’s inline axis. |
| vb | 在根元素的块轴的方向上，等于初始包含块大小的1%。 | Equal to 1% of the size of the initial containing block, in the direction of the root element’s block axis. |
| % | 数据类型由一个数字组成，后面跟着百分比符号（%）。可选地，它可能在前面有一个+或-符号，尽管负的值对所有属性都无效。和所有CSS维度一样，在这两者之间没有空格 | The <percentage> data type consists of a <number> followed by the percentage sign (%). Optionally, it may be preceded by a single + or - sign, although negative values are not valid for all properties. As with all CSS dimensions, there is no space between the symbol and the number. |
| cm | 厘米 | One centimeter. 1cm = 96px/2.54. |
| mm | 毫米 | One millimeter. 1mm = 1/10th of 1cm. |
| in | 英寸 (1in = 96px = 2.54cm) | One inch. 1in = 2.54cm = 96px. |
| px | 像素 (1px = 1/96th of 1in) | One pixel. For screen displays, it traditionally represents one device pixel (dot). However, for printers and high-resolution screens, one CSS pixel implies multiple device pixels. 1px = 1/96th of 1in. |
| pt | 像素 (1px = 1/96th of 1in) | One point. 1pt = 1/72nd of 1in. |
| pc | pica，大约6pt，1/6英寸； (1pc = 12 pt) | One pica. 1pc = 12pt = 1/6th of 1in. |
| deg | 表示角度的角度。一个完整的圆是360度。 | Represents an angle in degrees. One full circle is 360deg. Examples: 0deg, 90deg, 14.23deg. |
| grad | 表示倾斜角度的角度。一个完整的圆圈是400。 | Represents an angle in gradians. One full circle is 400grad. Examples: 0grad, 100grad, 38.8grad. |
| rad | 表示弧度的角度。一个完整的圆是2弧度，近似于6。 | Represents an angle in radians. One full circle is 2π radians which approximates to 6.2832rad. 1rad is 180/π degrees. Examples: 0rad, 1.0708rad, 6.2832rad. |
| turn | 在许多回合中代表一个角度。一个完整的圆是1圈。 | Represents an angle in a number of turns. One full circle is 1turn. Examples: 0turn, 0.25turn, 1.2turn. |
| HZ | 代表赫兹的频率 | Represents a frequency in hertz. Examples: 0Hz, 1500Hz, 10000Hz. |
| KHZ | 千赫兹 | Represents a frequency in kilohertz. Examples: 0kHz, 1.5kHz, 10kHz. |
| s | 秒 | Represents a time in seconds. Examples: 0s, 1.5s, -60s. |
| ms | 毫秒 | Represents a time in milliseconds. Examples: 0ms, 150.25ms, -60000ms. |
| fr | 数据类型被指定为一个数字，后面是单元fr。fr单元表示网格容器中剩余空间的一小部分。与所有CSS维度一样，单元与数字之间没有空格。 | The <flex> data type is specified as a <number> followed by the unit fr. The fr unit represents a fraction of the leftover space in the grid container. As with all CSS dimensions, there is no space between the unit and the number. |
- 上一篇 »HTML5 手机端动态适配
- 下一篇 »css排版之-标准文档流