如何在 CSS 中执行算术运算？

Posted 2023-03-06

【中文标题】如何在 CSS 中执行算术运算？

【英文标题】：How to perform arithmetic operations in CSS?

【发布时间】：2013-04-16 03:55:18

【问题描述】：

我想知道如何在 CSS 中实现算术运算。

例如： 我想并排对齐两个宽度为 50% 的 div，我想在这些 div 上设置边框。我想这样写我的规则。

#container 
    width: 50% - 1px; // I know this does not work.

为什么浏览器不支持 CSS 中的这种算术运算？

还有，我怎样才能让它工作？

【问题讨论】：

“为什么”问题通常是非建设性的。您应该将您的用例作为一个技术问题（并相应地写出标题）来寻求解决方案，而不是“只想知道为什么？”。

谢谢@JukkaK.Korpela 下次会照顾的。

【参考方案1】：

已经exists;您可以使用 CSS3 calc() 表示法：

div 
    background: olive;
    height: 200px;
    width: 200px;


div > div 
    background: azure;
    height: calc(100% - 10px);
    width: 100px;

http://jsfiddle.net/NejMF/

^{注意：它仅在modern browsers (IE9+) 中受支持，并且最近才被移动浏览器采用。}

【讨论】：

@blunderboy 浏览器前缀见答案：***.com/questions/2434602/…

calc 是 poorly supported in mobile browsers、IE8、Safari box-sizing: border-box。

【参考方案2】：

在您的<div> 上使用box-sizing: border-box; 使边框成为宽度计算的一部分。 box-sizing 的默认值为content-box，不包括width 属性中的填充或边框。

#container 
  border: 1px solid black;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 50%;

Paul Irish cmets 对 calc() 和 suggests using border-box 的使用感到满意，因为它更符合我们的“宽度”心理模型。

【参考方案3】：

可以使用 CSS 预编译器。 LESS 和 Sass 非常受欢迎。 您可以按照上面示例中的方式编写它。

http://www.lesscss.org/

当您是设计师时，LESS 更容易处理。对于程序员和 Ruby (on Rails) 开发人员来说，Sass 可能是更好的选择。