css-tutorial/chapters/007 尺寸单位.md

# 尺寸单位

*本节内容，将讲述如何使用css调整元素的大小，提高页面的美观性。*


## 一. 数字（Numbers）

数字可以用来定义`opacity`、`line-height`,还可以用于定义rgb颜色中的大小。这里指的数字是无单位的。例如(1, 2, 3, 100)和小数(.1, .2, .3)。

数字所处的上下文不同，它的意义也不一样。例如当定义`line-height`时，一个无单位的数字表示的是一个比例值：
```css
p {
    font-size: 24px;
    line-height: 1.5;
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="007 Box Model_1" src="https://codepen.io/AhCola/embed/jOmxoYw?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/jOmxoYw">
  007 Box Model_1</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

这个例子中，`line-height`为1.5，但是最终行高结果为24px的1.5倍大小，即36px。

> 为`line-height`提供一个无单位的数字值（即字体大小的倍数）是一个不错的选择。正如之前在继承中说过，`font-size`是可继承属性。定义无单位的`line-height`，保证行高永远是相对于`font-size`的。如果你定义`line-height: 15px`, 在某些字体大小的情况下，最终页面可能会看起来比较奇怪。

数字还可以使用在以下几种情形：

- filter: `filter: speia(0.5)`, 给元素添加一个50%的褐色滤镜。
- opacity: `opacity: 0.5`, 50%不透明度。
- color: `rgb(50, 50, 50)`, 分别设置r、g、b的颜色值，允许范围为0-255。
- transform: `transform: scale(1.2)`, 将元素放大1.2倍。

## 二. 百分比（Percentages）

当使用百分比设置css属性值时，你需要知道百分比是如何用于计算的。例如`width`的百分比是相对于父元素的宽度进行计算的。
```css
div {
    width: 300px;
    height: 100px;
}
div p {
    width: 50%; // 最终结果为150px
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="007 Box Model_2" src="https://codepen.io/AhCola/embed/yLbjWEp?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/yLbjWEp">
  007 Box Model_2</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

上面的例子中`div p`的宽度为150px。

如果设置`margin`和`padding`百分比值，不论`margin`和`padding`的方向如何，它们的百分比都是相对于父元素的`width`的。
```css
div {
    width: 300px;
    height: 100px;
}

div p {
    margin-top: 50%; /* calculated: 150px */
    padding-left: 50%; /* calculated: 150px */
}
```

## 三. 尺寸和长度单位

如果在数字后面添加一个单位，那么它就变成了**尺寸**，例如`1rem`。

### 绝对长度

所有绝对长度都基于相同的基础进行解析，使它们在CSS中使用的任何地方都是可预测的。例如使用`cm`单位设置一个元素的`width`，那么这个元素将呈现4cm的宽度，这个值是一个精确值，可以用尺子去测量的。

```css
div {
    width: 10cm;
    height: 5cm;
    background: black;
}
```
绝对长度非常适合设计用于打印的页面。

绝对长度尺寸表：

| 单位 | 名称                | 公式       |
| ---- | ------------------- | ------------------- |
| cm   | Centimeters         | 1cm = 96px/2.54     |
| mm   | Millimeters         | 1mm = 1/10th of 1cm |
| Q    | Quarter-millimeters | 1Q = 1/40th of 1cm  |
| in   | Inches              | 1in = 2.54cm = 96px |
| pc   | Picas               | 1pc = 1/6th of 1in  |
| pt   | Points              | 1pt = 1/72th of 1in |
| px   | Pixels              | 1px = 1/96th of 1in |


### 相对长度

相对长度是基于基础值进行计算的，与百分比有点类似。和百分比之间的区别在于，您可以根据上下文来确定元素的大小。如果尺寸单位为`ch`,表示使用文字大小作为计算的基础值，单位`vw`表示使用viewport的宽度作为计算的基础值。相对值在响应式布局中很有用。

#### 字体大小相对单位

css提供了一些相对于元素字体大小的相对单位。

| 单位 | 相对于                                                       |
| ---- | ------------------------------------------------------------ |
| em   | 在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width |
| ex   | 字符“x”的高度                                                |
| ch   | 数字“0”的宽度                                                |
| rem  | 根元素的字体大小                                             |
| lh   | 元素的line-height                                            |
| cap  | 当前元素字体的首字母大小                                     |
| ic   | "水"字形                                                     |
| rlh  | 根节点行高                                                   |

![css尺寸单位](https://cdn.jsdelivr.net/gh/pengfeiw/PengfeiBlog@1.0.0/image/96.jpg)

#### 视口相对单位

你可以使用视口的大小作为相对值计算的基。

| 单位 | 相对于                                                       |
| ---- | ------------------------------------------------------------ |
| vw   | 视口宽度的1%                                                 |
| vh   | 视口高度的1%                                                 |
| vi   | 等于初始[包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block)大小的 1%，在根元素的[行内轴](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties#inline-dimension)方向上。 |
| vb   | 等于初始[包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block)大小的 1%，在根元素的[区块轴](https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Logical_Properties#block-dimension)方向上。 |
| vmin | 视口高度 `vw` 和宽度 `vh` 两者之间的最小值。                 |
| vmax | 视口高度 `vw` 和宽度 `vh` 两者之间的最大值。                 |



## 四. 其他单位

还有一些其他的单位已经被指定来处理特定类型的值。

### 角度单位

```css
div {
    width: 150px;
    height: 150px;
    transform: rotate(60deg); // deg单位，旋转60度
}
```
<iframe height="300" style="width: 100%;" scrolling="no" title="007 Box Model_3" src="https://codepen.io/AhCola/embed/ZEKRqvX?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/AhCola/pen/ZEKRqvX">
  007 Box Model_3</a> by Pengfei Wang (<a href="https://codepen.io/AhCola">@AhCola</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>

### 分辨率单位

`dpi`表示每英寸的点数。

## 附：参考资料

- 谷歌learn css: [Sizing Units](https://web.dev/learn/css/sizing/#relative-lengths)

- MDN web文档：[length](https://developer.mozilla.org/zh-CN/docs/Web/CSS/length)



（完）