Question

作为一名网络开发人员，如果出现价值计算等问题，您可能会遇到很容易解决的问题。

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

line-height: (height / 2)px;

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

如果您知道元素的固定高度，则不需要这样做。但是一旦高度发生变化（较长的文字等），你就会知道元素的总高度。

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

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

Can you do this html layout without using tables

Answer 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的臭名昭着的'expression（）'语法而注定要失败。

Answer 2

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

Answer 3

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

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

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

就行不通。 CSS可以静态定义页面的外观。

Answer 4

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

Answer 5

这方面有了发展。仍然不是100％准备好，但它很有趣。我希望这有助于将来任何人访问此页面！

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

Answer 6

为什么“普通网站”无疑“？ jQuery可以很容易地做很多事情......

IE确实支持样式计算，但不建议使用，像狗一样执行，并且与其他所有内容完全不兼容。

Answer 7

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

CSS的值计算

7 个答案: