CSS - 我可以在 Calc() 中使用对象的宽度吗？

Question

我想要这样的东西:

height: calc(width + 5px);

这只是一个小例子，但我最终正在寻找一种方法来使用设置宽度作为计算的一部分，而不是一种更简单的方法来解决这个例子。我所做的任何搜索都只是提供了有关如何使用 calc() 的示例。设置宽度。谢谢!

Answer 1

最接近纯 CSS 的方法是将 CSS 变量与 calc 结合起来。

:root {
	--width: 100px;
}
div {
	border: 1px solid red;
	height: calc(var(--width) + 5px);
	width: var(--width);
}

<div>
test
</div>

这会让你定义一个 CSS 变量 --width并使用它来计算 div 的新高度。