jquery CSS calc（）函数
我遇到了这个页面CSS链接我不能不喜欢这个想法来计算不同单位的结果…但是我试过这个：
$('selector').css({'width':'calc(100%-20px)'}); 但它不起作用……任何人都有任何想法如何工作，或为什么这不起作用？
jQuery不支持calc()值，也不支持任何当前浏览器。
请在此处查看比较： http ： //en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29
在您的示例中，您可以只使用内部元素上的边距：
.parent{ width:100%; background:green; } .elem{ margin: 0 10px; background:blue; }
这样， .elem将是100％ – 20px宽。
jQuery支持calc（）。 我已经多次使用过这个：
-
$(".content-section").css('width','calc('+contentSectionWidth+'% - 15px)'); -
$(".content-section").css('width','calc(100% - 15px)');
CSS3的某些部分得到了很好的支持。 其他部分则不是。 这就是为什么它被分成模块，这些模块处于协议和实现的各个阶段 。 即使拥有完整的CSS3规范，我们还有很长的路要走，更不用说广泛的浏览器支持了。
所以CSS Level 3选择器是最稳定的规范，已经制作了推荐并且已经被很多浏览器和其他工具实现（尽管如此，所有主流浏览器都需要一段时间来支持它）。 其他几个PR和CR在最新的浏览器中都有足够的支持。
但“CSS3价值观和单位”仍然只是一个早期的工作草案，并且很可能在达到推荐标准之前发生重大变化。 事实上，由于草案是在几年前开始的，因此没有浏览器实现过calc() ，此时此function看起来不太可能成为标准。 如果你想保持良好支持的领域，你需要坚持使用CSS 2.1。
在此期间，必须使用嵌套元素，边距和填充来说100%-20px内容。
Ravi verma的回答是正确的。
我想补充的是您的代码无法正常工作的原因。 使用calc进行加法和减法时，您需要在前面有空格并继续运算符。
来自MDN文档 ：
+和 – 运算符必须始终用空格包围。 例如，calc（50％-8px）的操作数将被解析为百分比，后跟负长度，无效表达式，而calc（50％ – 8px）的操作数是百分比，后跟减号和长度。 更进一步，calc（8px + -50％）被视为长度，接着是加号和负百分比。 *和/运算符不需要空格，但允许添加它以保持一致性，并建议使用。