CSS 计算中的百分比值

Question

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

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

人们可能会假设它是宽度或高度，具体取决于您正在访问的属性（在本例中为宽度）。如果是这种情况，如果您想根据不同的属性进行一些计算，会发生什么情况？例如，根据高度的某些计算来设置宽度？比如说，设置容器宽度为高度的1.5倍？

Answer 1

从规格来看

calc() 表达式的计算值是计算了所有组件的表达式。

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

在内部使用百分比时并没有什么魔力，calc()它们只会表现得好像您没有使用calc().

所以 usingwidth:100%与 which 完全相同，width:calc(100%)也与 相同calc(50% + 50%)。当您添加另一个单位时，就像width:calc(100% - 2em)计算一样，然后从中width:100%删除。2em

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

如果您想根据不同的属性进行一些计算，会发生什么情况？例如，根据高度的某些计算来设置宽度？

你不能用 做这样的事情calc()。CSS 一般不允许这样的事情。您可以考虑使用 JS、一些技巧来保留宽度/高度之间的比例，或者使用 CSS 变量并为不同的属性分配相同的值。

与 CSS 变量组合使用被误用的相关问题calc()：Calc()outputtingunknown value