在一行中使用多个CSS单位

Question

是否可以在一行CSS代码中使用多个单元？ 例如：

width: 20% + 5px;

我不这么认为。如果是这样，你怎么用javascript这样的语言呢？

Answer 1

正如Sirko指出的，有calc()。不幸的是，使用该功能有一个问题：主要浏览器IE <9 and Opera does NOT support it。

如果您想要包含填充，那么您可以使用远box-sizing attribute set to border-box的better browser support来实现相同的功能。对于IE＆lt; 8，还有polyfill可用。

.span20 {
    -moz-box-sizing: border-box;
         box-sizing: border-box;

    width: 20%;
    padding: 5px;
    float: left;
}

这是展示上述情况的jsfiddle。

Answer 2

可以使用CSS calc()：

width: -webkit-calc(20% + 5px);
width:    -moz-calc(20% + 5px);
width:         calc(20% + 5px);

Browser Support