尺寸单位

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

一. 数字（Numbers）

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

数字所处的上下文不同，它的意义也不一样。例如当定义line-height时，一个无单位的数字表示的是一个比例值：

p {
    font-size: 24px;
    line-height: 1.5;
}

这个例子中，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的百分比是相对于父元素的宽度进行计算的。

div {
    width: 300px;
    height: 100px;
}
div p {
    width: 50%; // 最终结果为150px
}

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

如果设置margin和padding百分比值，不论margin和padding的方向如何，它们的百分比都是相对于父元素的width的。

div {
    width: 300px;
    height: 100px;
}

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

三. 尺寸和长度单位

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

绝对长度

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

div {
    width: 10cm;
    height: 5cm;
    background: black;
}

绝对长度非常适合设计用于打印的页面。

绝对长度尺寸表：

相对长度

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

字体大小相对单位

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

视口相对单位

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

四. 其他单位

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

角度单位

div {
    width: 150px;
    height: 150px;
    transform: rotate(60deg); // deg单位，旋转60度
}

分辨率单位

dpi表示每英寸的点数。

附：参考资料

• 谷歌learn css: Sizing Units

• MDN web文档：length

（完）