在css中使用 Calc() 函数的一些用法例子
calc()是一种在 CSS 中进行简单数学运算的原生 CSS 方法，可表示任何长度值（或几乎任何数值）。它有四个简单的数学运算符：加 (+)、减 (-)、乘 (*) 和除 (/)。能在代码中进行数学运算是件好事，也是对这种看重数学运算的语言的有益补充。
但它有用吗？过去我曾绞尽脑汁试图找出明显有用的一些例子。不过肯定有一些。
CSS预处理器不能做我们的数学吗？
所有 CSS 预处理器都有数学函数，而且非常有用。但它们并不像Native数学计算那样强大。calc()最有用的功能是混合单位计算，如百分比和像素。任何预处理器都无法做到这一点。这必须在渲染时进行。
语法
.thing {
width: 90%; /* fallback if needed */
width: calc(100% - 3em);
}数学运算符周围必须有空格。可以嵌套。
例#1：（100%高度减去header高度）
高度为100% 的块级子元素将与其块级父级元素一样高。比如下图，让彩色模块与父元素一样高：
但现在假设父元素变得太小，无法容纳模块中的所有内容。你希望内容滚动，但只希望内容滚动，而不是整个模块滚动。只要设置 overflow-y: auto; 就可以了，对吗？不完全是，因为只有当内容元素本身具有可溢出的设定高度时，overflow-y 才有用。我们不能让内容元素的高度达到 100%，因为有header在，高度会太高。我们需要 100%减去header的高度。如果我们知道header的高度，就可以做到这一点！
* {
/* So 100% means 100% */
box-sizing: border-box;
}
html, body {
/* Make the body to be as tall as browser window */
height: 100%;
background: #ccc;
padding: 20px;
}
body {
padding: 20px;
background: white;
}
.area-one {
/* With the body as tall as the browser window
this will be too */
height: 100%;
}
.area-one h2 {
height: 50px;
line-height: 50px;
}
.content {
/* Subtract the header size */
height: calc(100% - 50px);
overflow: auto;
}你可能会抱怨header不应该有固定大小。如果有一天，calc() 可以减去元素的测量尺寸，那可能会很酷，但目前还无法实现。你可以用省略号设置header溢出。
例2：计算出到右下角的x个像素
我们可以轻松地将背景图片定位在离左上角 X 像素的位置。
background-image: url(dog.png);
background-position: 50px 20px;这样，dog.png 就会位于元素框左侧 50px 和顶部 20px 的位置。但如果你想让它离右边 50px，离底部 20px，又该怎么办呢？如果只是直接使用长度值，这是不可能的。但是，calc() 可以做到这一点！
background-image: url(dog.png);
background-position: calc(100% - 50px) calc(100% - 20px);例3：自我实现的等距等边框
比方说，您希望两列相邻。第一列宽 40%，第二列宽 60%，但两列之间有固定的 1em 间距。不要想太多 网格有固定的间隙，但从某种意义上说，它们并不是真正的间隙。列本身会相互碰撞，而列是由这些列内部的填充物构成的。
使用 calc()，我们可以使第一列的宽度为 40%，右边距为 1em，然后使第二列的宽度为 60%，减去 1em。
.area-one {
width: 40%;
float: left;
margin-right: 1em;
}
.area-two {
width: calc(60% - 1em);
float: right;
}如果想保持更精确的比例，可以去掉两列中一半的边框。现在你有了两列真正的列，它们被固定的空间分隔开来，而不需要父元素或使用内部填充。
例 #4：使数学符号更容易理解
说到列，有时数字会显得得很混乱。比方说，如果你想要一个 7 列的网格，你可能会有这样的类：
.column-1-7 {
width: 14.2857%
}
.column-2-7 {
width: 28.5714%
}
.column-3-7 {
width: 42.8571%
}这并不是什么神奇的数字，但很难一目了然。
.column-1-7 {
width: calc(100% / 7);
}
.column-2-7 {
width: calc(100% / 7 * 2);
}
.column-3-7 {
width: calc(100% / 7 * 3);
}
例 #5：有点蹩脚的 box-sizing替换功能
我喜欢使用通用的 box-sizing：border-box; 因为这意味着你不必做太多的数学运算来计算元素的实际大小，也不必在边框和padding等发生变化时调整数学运算。
如果您想模拟box-sizing的作用，可以使用 calc() 根据需要减去数值。
.module {
padding: 10px;
/* Same as box-sizing: padding-box */
width: calc(40% - 20px);
border: 2px solid black;
/* Same as box-sizing: border-box */
width: calc(40% - 20px - 4px);
}不过，浏览器对 box-sizing 的支持远胜于 calc()，因此很少使用。
未来？
我认为，如果我们能在 content 属性以外的地方使用 attr() 函数，那将会非常有趣。有了它，我们就可以从 HTML 元素中提取值，对其进行计算，并使用新的数字进行设计。例如，根据输入内容所包含的数字为其着色。
/* Not real */
progress::progress-bar {
transform: rotate(calc(!parent(attr(value))*18)) + deg);
}
本文文字及图片出自 出处
