有没有办法在CSS中计算？

Question

我正在研究CSS，我有一个问题，有没有办法用纯CSS计算？

让我们说一个基本的计算，100％ - 50px。我不想使用Javascript，即使这是一种简单的方法。我想让我的代码保持干净整洁。我想也许有可能写出这样的东西：

width: 100% - 50px;

但它没有用。我开始倾向于使用Javascript，但我宁愿不这样做。

Answer 1

您可以在支持浏览器中使用calc()：

width: calc(100% - 50px);

参考文献：

• calc()（MDN）。
• calc()（W3C）。
• calc() compatibility。

Answer 2

试试这个

width: calc(100% + 12px);
width: -webkit-calc(100% + 12px);
width: -moz-calc(100% + 12px);

或

width: calc(100% - 12px);
width: -webkit-calc(100% - 12px);
width: -moz-calc(100% - 12px);