css单位计算方法,CSS中的calc()计算和vw/vh长度单位

calc()

CSS中除了使用具体的值，还可以使用calc()方法来执行一些计算。

语法

/* property: calc(expression) */

width: calc(100% - 60px);

calc()函数用一个表达式作为参数，用表达式的结果作为值。

表达式的运算对象可以使用任意长度值，并且可以混用(px/em)，也可以通过小括号()来调整计算顺序。

表达式中可以使用+|-|*|/操作符来操作运算对象来得到结果。

请注意，+和-运算符的两边必须要有空白字符，否则为无效值，虽然*和/运算符不要求，但是为了统一，最好也加上空格。

calc()支持变量嵌套，语法如下:

.var {

--var1: 80px;

--var2: calc(var(--var1) / 2);

--var3: calc(var(--var2) / 2);

width: var(--var3); /* 80px/2/2 = 20px */

}

用途

主要用于计算不确定值，比如要定义一个父元素size不确定的，margin为2em宽度为100%的子元素。如果用以下方式定义，则会发生溢出的情况

.block{

width: 100%;

margin: 2em;

}

通过calc()就可以很方便的定义出来

.block{

width: calc(100% - 4em);

margin: 2em;

}

vw/vh长度单位

vm/vh是CSS的相对长度单位。

与百分比%很类似都是相对长度单位，两者的主要区别是，vw/vh是相对于浏览器可视窗口viewport的，而%是相对于父元素大小的，如果父元素大小不固定，设置%是没有意义的，但是浏览器可视窗口大小是一直可用的。

什么是viewport

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的 UI， 菜单栏等——即指你正在浏览的文档的那一部分。

值得注意的是页面中的一些导航菜单也包括在其中。Viewport外的区域，可能需要滚动到其所在的区域才会出现在屏幕上。

概括地说，viewport基本上是当前文档的可见部分/浏览器可视区域。

相对窗口Size的长度单位

有4个相对于窗口Size的长度单位:

单位

相对于

vw

视窗宽度的1%

vh

视窗高度的1%

vmin

视窗较小尺寸的1%(vw/vh较小的值)

vmax

视图大尺寸的1%(vw/vh较大的值)

结合使用

之所以把calc和vw/vh放在一起介绍，主要原因就是两者经常结合起来一起使用。

比如要定义一个左测宽度固定的横向两列布局，就可以用以下代码实现(当然这个需求有n多实现方式，比如float/flex等)

body {

margin: 0;

padding: 3px;

overflow: hidden;

}

.left {

width: 200px;

height: calc(100vh - 6px);

display: inline-block;

}

.right {

width: calc(100vw - 206px);

height: calc(100vh - 6px);

display: inline-block;

}