2018-10-12 16:35:31 -04:00
|
|
|
|
---
|
|
|
|
|
|
title: Units
|
|
|
|
|
|
localeTitle: 单位
|
|
|
|
|
|
---
|
|
|
|
|
|
## 单位
|
|
|
|
|
|
|
2019-01-04 01:58:24 +08:00
|
|
|
|
许多CSS属性，如`width` ， `margin` ， `padding` ， `font-size`等需取用长度。 CSS具备一种可用多种单位表达长度的方式。长度是数字和单位的组合，没有空格。例如`5px` ， `0.9em`等
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
|
|
### 长度
|
|
|
|
|
|
|
|
|
|
|
|
#### 常用长度单位
|
|
|
|
|
|
|
|
|
|
|
|
CSS使用几个单位来表示长度。所有浏览器都支持旧版本：
|
|
|
|
|
|
|
|
|
|
|
|
* **rem** - “r”代表“root”：“root em” - ，它等于固定到根元素的字体大小（几乎总是`<html>` ）。
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* **vh**和**vw** - 许多响应式网页设计技术重度依赖百分比规则。但是，CSS百分比度量并不总是解决所有问题的最佳方法。度量**vh**等于视口高度的1/100。因此，例如，如果浏览器的高度为800px，则1vh等于8px，同样，如果视口的宽度为650px，则1vw等于6.5px。
|
2018-10-12 16:35:31 -04:00
|
|
|
|
* **vmin**和**vmax** - 这些单位与**vh**和**vw**的最大值或最小值有关。例如，如果浏览器设置为1200px宽，高度为600px，则1vmin为6px，1vmax为12px。但是，如果宽度设置为700px且高度设置为1080px，则vmin将等于7px且vmax为10.8px。
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* **ex**和**ch** - 这些单位与**em**和**rem**类似，取决于当前的字体和字体大小。但是，与**em**和**rem**不同，这些单元还取决于`font-family`因为它们是根据每种字体特有的度量来确定的。 **ch**单位（“字符单位”）被定义为字符零（“0”）的宽度。 **ex**单位定义为“当前字体的当前x高度或1em的一半”。给定字体的height-x是该字体的小写“x”的高度。它通常是字体的中间标记。
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
2019-01-04 01:58:24 +08:00
|
|
|
|
|单位|说明| | --------------- | ----------------------- | | em | 1 em是使用它的元素上font-size的计算值。 | | ex | 1 ex是当前字体的x高度。 x高度通常（但不总是，例如，如果字体中没有'x'）等于小写'x'|的高度。 | ch | 1 ch是当前字体中'0'（零）字形的前进。 'ch'代表人物。 | | rem | 1 rem是文档根元素的字体大小属性的计算值 | vw | 1vw是视口宽度的1％。 'vw'代表'视口宽度'。 | | vh | 1vh是视口高度的1％。 'vh'代表'视口高度'。 | | vmin |等于'vw'或'vh'|中较小的一个 | vmax |等于'vw'或'vh'|中的较大者
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
|
|
CSS中有两种用于长度和大小的单位：相对和绝对。
|
|
|
|
|
|
|
|
|
|
|
|
### 相对单位
|
|
|
|
|
|
|
|
|
|
|
|
相对单位相对于元素的当前字体大小或其他设置而变化。一些相关单位是
|
|
|
|
|
|
|
|
|
|
|
|
* `em`
|
|
|
|
|
|
* 当前元素的`font-size`的大写字母M的宽度。
|
|
|
|
|
|
* 字体大小从父元素继承。
|
|
|
|
|
|
* 例： `html div { font-size: 16px; } div h3 { font-size: 2rem; }` 这里`<h3>`将等于`32px`因为当前或父元素的`font-size`是`16px` 。
|
|
|
|
|
|
* `rem`
|
|
|
|
|
|
* root `em` ，或默认基本`font-size`的大写字母M的宽度。
|
|
|
|
|
|
* 父字体大小无效。
|
|
|
|
|
|
* 例： `html body { font-size: 16px; } p { font-size: 1.5rem; }` 由于默认基本`font-size`为`16px`因此`<p>`将等于`24px` 。
|
|
|
|
|
|
* `%`
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* 相对于父级大小的百分比大小。
|
2018-10-12 16:35:31 -04:00
|
|
|
|
* 例： `html div { width: 400px; } div p { width: 75%; }` 由于父级的宽度为`400px` ，内部段的宽度将为`300px` ，即`400px` 75％。
|
|
|
|
|
|
* `vw`
|
|
|
|
|
|
* 视图宽度，或视口宽度的1/100
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* 例： `html body { width: 100vw; }`无论是417像素，690像素还是任何宽度， `body`填满视口宽度。
|
2018-10-12 16:35:31 -04:00
|
|
|
|
* `vh`
|
|
|
|
|
|
* 视图高度，或视口高度的1/100
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* 例： `html div { height: 50vh; }` 无论是1080px，1300px还是任何高度，此`div`将填充视口高度的一半。
|
2018-10-12 16:35:31 -04:00
|
|
|
|
|
|
|
|
|
|
### 绝对单位
|
|
|
|
|
|
|
|
|
|
|
|
无论屏幕尺寸或其他设置如何，绝对单位都是相同的。一些绝对单位是
|
|
|
|
|
|
|
|
|
|
|
|
* `px`
|
|
|
|
|
|
* 像素
|
|
|
|
|
|
* 像素数相对于观看设备屏幕的质量
|
|
|
|
|
|
* `in` ， `cm` ， `mm`
|
|
|
|
|
|
* 英寸，厘米，毫米
|
|
|
|
|
|
* 小屏幕或大屏幕上的英寸是一英寸
|
|
|
|
|
|
* `pt` ， `pc`
|
|
|
|
|
|
* 分（1/72英寸）和皮卡（12分）
|
|
|
|
|
|
|
|
|
|
|
|
例
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
|
|
|
|
|
|
p {
|
|
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
div {
|
|
|
|
|
|
width: 3in;
|
|
|
|
|
|
border-width: 3pt;
|
|
|
|
|
|
}
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
`font-size: 24px`段落将在手机，平板电脑或桌面屏幕上显示为24px。
|
|
|
|
|
|
|
|
|
|
|
|
`div`将显示为3英寸宽，无论屏幕大小如何， `div`上的`border`将为3/72英寸厚。
|
|
|
|
|
|
|
|
|
|
|
|
### 更多信息：
|
|
|
|
|
|
|
|
|
|
|
|
* [Web平台了解像素和其他CSS单位](https://webplatform.github.io/docs/tutorials/understanding-css-units/)
|
|
|
|
|
|
* [MDN Web Docs - CSS单位](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
|
|
|
|
|
|
* [网页设计教程]('https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573)
|
2019-01-04 01:58:24 +08:00
|
|
|
|
* [CSS单元的HTML帮助](http://www.htmlhelp.com/reference/css/units.html)
|
