css中的单位取值,calc计算

calc()计算

CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
实例：

.foo1 {
  width: calc(100px + 50px);
}
.foo2 {
    width: calc(100% - 50px);
}

calc() 函数可以用来对数值属性执行四则运算

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

calc() 函数可以嵌套。在函数里边，会被视为简单的括号表达式，如下例所示。

.foo {
    width: calc( 100% / calc(100px * 2) );
}
.foo {
    width: calc( 100% / (100px * 2) );
}

calc() 函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合计算绝对单元（比如百分比与视口单元）与相对单元（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。

CSS 有几个不同的单位用于表示长度，一般分为两种类型的长度单位：相对和绝对；长度是由一个数字和单位组成如 10px, 2em, 等。

文本相对长度单位
（1）em相对于当前对象内文本的字体尺寸
（2）ex相对于字符“x”的高度。通常为字体高度的一半
（3）ch数字“0”的宽度
（4）rem相对于根元素(即html元素)font-size计算值的倍数

视口相对长度单位
（1）vw相对于视口的宽度。视口被均分为100单位的vw
（2）vh相对于视口的高度。视口被均分为100单位的vh
（3）vmax相对于视口的宽度或高度，总是相对于大的那个。视口的宽度或高度被均分为100单位的vmax
（4）相对于视口的宽度或高度，总是相对于小的那个。视口的宽度或高度被均分为100单位的vmin

绝对长度单位
（1）cm厘米
（2）mm毫米
（3）q1/4毫米（quarter-millimeters）; 1q = 0.25mm
（4）in英寸（inches）; 1in = 2.54cm
（5）pt点（points）; 1pt = 1/72in
（6）pc派卡（picas）; 1pc = 12pt
（7）px像素（pixels）; 1px = 1/96in