在一行中使用多个CSS单元

Using multiple CSS Units in one line

本文关键字：CSS 单元 一行      更新时间：2023-09-26

可以在一行CSS代码中使用多个单元吗?例如:

width: 20% + 5px;

我想没有。如果是这样，如何在javascript这样的语言中做到这一点?

正如Sirko指出的，有calc()。不幸的是，使用这个功能有一个问题:主流浏览器IE <9和Opera都不支持这个功能。

如果所有你想要的是包括一个填充，那么你可以实现同样的事情与box-sizing属性设置为border-box有更好的浏览器支持。对于IE<8，也有一个可用的填充。

.span20 {
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width: 20%;
    padding: 5px;
    float: left;
}

下面是演示上述内容的示例:

可以使用CSS calc():

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

浏览器支持

相关文章：