CSS计算

CSS is a complete conundrum; we all appreciate CSS because of its simplicity but always yearn for the language to do just a bit more. CSS has evolved to accommodate placeholders, animations, and even click events. One problem we always thought we'd have with CSS, however, was its static nature; i.e. there's really no logic, per se. The CSS calc routine bucks that trend, providing developers an ounce of programming ability within CSS.

CSS是一个完整的难题。 大家都明白CSS，因为它简单，但始终向往的语言做更多的只是有点 。 CSS已经发展到可以容纳占位符 ， 动画甚至单击事件 。 但是，我们一直认为CSS会遇到的一个问题是它的静态特性。 即，本质上没有逻辑。 CSS calc例程与这种趋势背道而驰，为开发人员提供了CSS中的一点编程能力。

View Demo 观看演示

CSS (The CSS)

The calc routine is especially useful when calculating relative widths. Calculations can be additions, subtractions, multiplications, and divisions. Have a look:

当计算相对宽度时，calc例程特别有用。 计算可以是加，减，乘和除。 看一看：

/* basic calc */
.simpleBlock {
	width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
	width: calc(100% - 50% / 3);
	padding: 5px calc(3% - 2px);
	margin-left: calc(10% + 10px);
}

Be sure to use whitespace around operators so that they aren't construed as positive and negative notations.

请确保在运算符周围使用空格，以免它们被解释为正负符号。

View Demo 观看演示

CSS calc is another example of CSS taking over the role of JavaScript in layout, and I think it's a great thing. As we move more toward responsive design, calc allows us to use percentages for overall block widths, with just a touch of pixel help for some of its components. Have you used calc for your apps? Share how you used calc!

CSS calc是CSS在布局中取代JavaScript的另一个例子，我认为这是一件了不起的事情。 随着我们朝着响应式设计的方向发展，calc允许我们使用百分比表示块的整体宽度，而其某些组件只需一点像素帮助。 您是否将calc用于您的应用程序？ 分享您如何使用calc！

翻译自: https://davidwalsh.name/css-calc