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

calc()
视图Size
结合使用

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;
                    }