logo标签列表

CSS的值计算

css
20
作为一名网络开发人员，您经常会遇到问题，如果有像值计算这样的东西，问题可能会很容易解决。 我经常想知道为什么在CSS中不能做这样的事情：
line-height: (height / 2)px;

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

如果您知道元素的固定高度，则不需要此功能。但是，如果高度可能会改变（例如更长的文本等），则无法获得元素的总高度。

使用附加的JS可以轻松解决此问题，但对于普通网站来说，这是不可行的。那么为什么我们不能在CSS中添加引用当前值并使用它们的能力呢？

如果您查看像这样的问题，就会知道我所指的情况：

这里有问题吗？还是这是一个CSS功能建议？如果是后者，我建议将其提交给W3C或创建自己的Web浏览器。 :-) - George Stocker
我认为这不是一个真正的问题，最好关闭或修改。 - Aron Rotteveel
我想知道您对此的看法。 - Sebastian Hoitz
7个回答
14
为什么不能在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臭名昭著的‘expression()’语法一样注定失败。

有很多情况下这种方法都是可行的。比如说 "height: 5em; line-height: height-4px;"，在高度和行高之间不存在递归问题：高度独立于行高而固定。但我不能用 em 或像素来指定行高，因为此时我不一定知道一个 em 对应多少像素。我明白有些情况下我们会陷入无限循环，当算法“通常”有效时编写代码也变得困难。或许可以制定一个规则，只进行一次递归并停止。 - Jay
13
4
不准确。规格说明没有提到使用动态值，我只看到了常量。 - Miguel Angelo
8
我认为这是因为CSS仅仅定义了浏览器如何显示内容，没有将任何信息反馈给样式表。换句话说，CSS不具有动态性。
如果您知道元素的高度并希望每次页面显示时更改它，可以使用PHP或其他语言生成样式表。然后您也知道高度的一半，并可以设置它。
如果您不知道高度，则需要进行动态更改。浏览器首先必须呈现页面，然后确定元素的高度并将其发送回CSS。在那里，行高被计算并在呈现的页面中进行修改。但是，可能整个元素的高度也会发生变化。现在，浏览器必须再次返回CSS等等...
这种方法行不通。CSS只能静态地定义页面的外观。
4
4

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

1
为什么对于普通网站来说这是“不可能的问题”？jQuery可以很容易地完成许多操作...
IE确实支持样式中的计算，但并不推荐使用，性能很差，并且与其他所有内容完全不兼容。
1
因为仍有一些人关闭了JS。 - Sebastian Hoitz
0

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

4
SASS和LESS是基于服务器的，与Web浏览器上的渲染无关。因此，不能用它们来根据当前视口高度等动态计算值。 - Ron Deijkers
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接