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

Question

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

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

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

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

而且，我怎样才能让它工作？

Answer 1

它已经存在；您可以使用 CSS3calc()表示法：

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

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

http://jsfiddle.net/NejMF/

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

Answer 2

使用box-sizing: border-box;您<div>的边框使宽度计算的一部分。的默认值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 评论calc()并建议使用边框框，因为它更符合我们的“宽度”心理模型。

Answer 3

可以使用 CSS 预编译器。LESSansSass很受欢迎。您可以按照上面示例中的方式编写它。

http://www.lesscss.org/

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