CSS的值计算答案

【问题标题】：Value calculation for CSSCSS的值计算
【发布时间】：2010-10-06 09:14:59
【问题描述】：

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

我经常想知道为什么不能在 CSS 中做这样的事情：

line-height: (height / 2)px;

这将解决您在想要垂直对齐元素时遇到的一些问题，例如。目前很难使用 CSS 垂直对齐元素，并且会产生相当多的开销。

如果您知道元素的固定高度，则不需要它。但是，一旦高度发生变化（更长的文本等），您就很难知道元素的总高度。

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

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

Can you do this html layout without using tables

【问题讨论】：

这里有问题吗？或者这是一个 CSS 功能建议？如果是后者，我建议将其提交给 W3C，或者创建自己的 Web 浏览器。 :-)
我会说这不是一个真正的问题，很可能应该关闭或更改。
我想知道您对此有何看法。

标签： css

【解决方案1】：

为什么不能在 CSS 中做这样的事情：line-height: (height / 2)px;

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

在这个例子中，除非你显式设置'height'（在这种情况下，显式设置'line-height'也很容易），元素的高度取决于其内容文本的行高，这取决于高度...

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>

当您调整浏览器窗口的大小时，行高和 offsetHeight 会发生变化，从而导致布局不一致。到了一定尺寸，高度就会爆炸。

有一种情况允许只包含常量的简单表达式，例如：

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

但任何涉及动态计算属性的东西都注定要失败，就像 IE 臭名昭著的“表达式()”语法一样。

【讨论】：

嗯，有很多情况下它会起作用。考虑“高度：5em；行高：height-4px；”高度和行高之间不存在递归问题：高度是固定的，与行高无关。但是我不能在 em 或像素中指定行高，因为此时我不一定知道 em 有多少像素。我知道在某些情况下我们会陷入无限循环，并且当算法“通常”有效时很难编写代码。也许有一条规则只是说我们不会递归：我们通过一次就停止。

【解决方案2】：

CSS3.1 定义了 calc() - 它完全符合您的要求。 http://www.w3.org/TR/css3-values/#calc

【讨论】：

这不是真的。规范没有说明使用动态值...我在那里只能看到常量。

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

您可能对编译为 CSS 的语言感兴趣，例如 SASS、LESS 或 Stylus。

【讨论】：

【解决方案5】：

这方面已经有了发展。仍然没有 100% 准备好，但它很有趣。我希望这对将来访问此页面的任何人有所帮助！

https://developer.mozilla.org/en-US/docs/CSS/calc

【讨论】：

【解决方案6】：

为什么“对于普通网站来说毫无疑问”？ jQuery 可以很容易地完成很多这样的工作......

IE 确实支持样式计算，但不建议这样做，表现得像狗一样，并且与其他一切完全不兼容。

【讨论】：

因为还是有人把JS关掉了。

【解决方案7】：

您可以使用 SASS 和 LESS 。如果你对他们一无所知，Google他们：

【讨论】：

SASS 和 LESS 是基于服务器的，与网页浏览器上的渲染无关。因此，它不能用于根据当前高度动态计算值，例如视口。