Question

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

例如：我想并排排列两个div，每个都有50％的宽度，我想在这些div上给出边框。我想写这样的规则。

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

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

而且，我怎样才能让它发挥作用？

Answer 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 +）中受支持，并且最近才被移动浏览器采用。}

Answer 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%;
}

保罗爱尔兰对calc()和suggests using border-box的使用进行了评论，因为它更符合我们的“宽度”心理模型。

Answer 3

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

http://www.lesscss.org/

当你是一名设计师时，LESS更容易处理。对于程序员和Ruby（在Rails上）开发人员来说Sass可能是更好的选择。

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

3 个答案: