Question

在CSS calc中指定百分比值时，calc如何知道我是指width还是height？

.container {
    width: calc(100% - 2vw); // 100% here is width or height ?
}

根据您要访问的属性（在这种情况下为宽度），可以假定它是宽度还是高度。如果是这样，如果您想根据其他属性进行一些计算，会发生什么？例如，基于高度的计算来设置宽度？是说，将容器的宽度设置为高度的1.5倍？

Answer 1

来自the specification

calc（）表达式的计算值是已计算所有成分的表达式。

在计算值时间未解析百分比的地方，在calc（）表达式中未解析百分比，例如calc（100％-100％+ 1em）解析为calc（1em + 0％），而不是1em。如果某个值（例如height属性）中有用于计算百分比的特殊规则，则只要calc（）表达式包含百分比，它们就会适用。

在calc()内使用百分比时没有魔术，它们的行为就像您未在使用calc()一样。

因此，使用width:100%与width:calc(100%)完全相同，也与calc(50% + 50%)相同。当您添加另一个像width:calc(100% - 2em)这样的单位时，就像计算width:100%一样，然后从其中删除2em。

基本上，calc()在组合百分比值和非百分比值时很有用，以便获得准确准确的结果，例如从总宽度的10px中删除50% 使用width:calc(50% - 10px)。

如果您要基于其他属性进行一些计算，会发生什么？例如，基于高度的计算来设置宽度？

您无法使用calc()做这种事情。 CSS通常不允许这样的事情。您可以考虑使用JS，一些 hacks 来保留ratio between width/height，也可以使用CSS变量并为不同的属性分配相同的值。

有关calc()与CSS变量结合使用的使用被误用的相关问题：Calc() outputting unexpected value

CSS Calc中的百分比值

1 个答案: