CSS的值计算

作为一名web开发人员，您经常遇到一些问题，如果有价值计算之类的东西，这些问题可能很容易解决

我经常想知道为什么不能在CSS中执行类似的操作：

line-height: (height / 2)px;

例如，这可以解决在垂直对齐图元时遇到的一些问题。现在很难使用CSS垂直对齐元素，并且会产生相当大的开销

如果您知道图元的固定高度，则不需要此选项。但一旦高度发生变化（文本变长等），您就必须了解元素的总高度

使用额外的JS很容易解决这个问题，但对于普通网站来说这是不可能的。那么，我们为什么不在CSS中添加引用当前值并使用它们的功能呢

如果你研究像这样的问题，你知道我的意思是什么：

---

我认为这是因为CSS只是定义了浏览器显示内容的方式。没有信息流返回到样式表，或者换句话说：CSS不是动态的

如果您知道元素的高度，并且希望在每次显示页面时都对其进行更改，则可以使用PHP或其他语言生成样式表。然后你也知道一半的高度是多少，也可以设置它

如果你不知道高度，这将是一个动态变化。浏览器必须首先呈现页面，然后确定元素的高度并将其发送回CSS。在渲染页面中计算并更改行高。但可能因此元素的整体高度也会发生变化。现在浏览器必须再次回到CSS，等等

这是行不通的。CSS是用来静态定义页面外观的。

为什么它“对普通网站毫无疑问”？jQuery可以相当轻松地完成很多工作

IE确实支持各种风格的计算，但不推荐使用，它的表现就像狗一样，与其他所有东西完全不兼容

为什么在CSS中不可能这样做：行高：（height/2）px

因为这样可以很容易地引入逻辑循环

在本例中，除非显式设置“高度”（在这种情况下，显式设置“行高”也很容易），否则元素的高度取决于其内容文本的行高，而行高取决于高度

IE试图用“expression（）”语法来提供这一点，但实际上不起作用。IE的方法是让它一步一步地重新计算，因此如果你有一个不确定的表达式，它可以随着表达式值的变化不断地重新绘制元素。有关如何出错的示例，请尝试：

<div id="q" style="background: yellow; line-height: expression(document.getElementById('q').offsetHeight/2+'px');">
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
</div>

---

但是，任何涉及动态计算属性的操作都注定会失败，正如IE臭名昭著的“expression（）”语法一样。

CSS3.1定义了calc（）-它完全按照您的要求执行

您可能对编译成CSS的语言感兴趣，例如，或。

这方面已经有了发展。仍然没有100%准备好，但这很有趣。我希望这有助于任何人来到这个网页在未来

---

您可以使用SASS和LESS。

---

如果你对他们一无所知，请告诉他们：

这里有什么问题吗？或者这是一个CSS特性建议？如果是后者，我建议将其带到W3C，或者创建自己的web浏览器。：-）我想说这不是一个真正的问题，应该关闭或更改。我想知道你对此的看法。因为仍然有一些人关闭了JS。这不是真的。规范中没有提到使用动态值。。。我只能在那里看到常量。SASS和更少的是基于服务器的，与webbrowser上的渲染无关。因此，这不能用于根据视口等的当前高度动态计算值。在很多情况下，这是可行的。考虑“高度：5EM；线高度：Heig-4Px；”在高度和线高度之间没有递归的问题：高度是独立于线高度固定的。但是我不能用em或像素来指定线的高度，因为我不一定知道在这一点上一个em有多少像素。我知道在某些情况下，我们会进入一个无限循环，当算法“通常”工作时，编写代码是很困难的。也许有一条规则只是说我们不会重复：我们做一次，然后停下来。

line-height: (1em+4px);