尺寸单位

本节内容，将讲述如何使用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;
}

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

绝对长度尺寸表：

单位	名称	公式
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	根节点行高

视口相对单位

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

单位	相对于
vw	视口宽度的1%
vh	视口高度的1%
vi	等于初始包含块大小的 1%，在根元素的行内轴方向上。
vb	等于初始包含块大小的 1%，在根元素的区块轴方向上。
vmin	视口高度 vw 和宽度 vh 两者之间的最小值。
vmax	视口高度 vw 和宽度 vh 两者之间的最大值。

四. 其他单位

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

角度单位

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

分辨率单位

dpi表示每英寸的点数。

附：参考资料

• 谷歌learn css: Sizing Units

• MDN web文档：length

（完）