CSS 的值计算
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/527861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Value calculation for CSS
提问by Sebastian Hoitz
As a web developer you often run into problems that might be solved very easily if there was something like value calculation.
作为 Web 开发人员，您经常会遇到一些问题，如果有诸如价值计算之类的东西，这些问题可能很容易解决。
I've often wondered why it is not possible to do something like this in CSS:
我经常想知道为什么不可能在 CSS 中做这样的事情：
line-height: (height / 2)px;
This would solve some problems you run into when you want to vertical align an element, for example. It is difficult to vertical align elements using CSS right now and produces quite some overhead.
例如，当您想要垂直对齐元素时，这将解决您遇到的一些问题。现在很难使用 CSS 垂直对齐元素，并且会产生相当多的开销。
You do not need this in cases where you know the fixed height of an element. But as soon as the height is subject to change (longer text, etc.) you are screwed on knowing the total height of an element.
如果您知道元素的固定高度，则不需要此操作。但是一旦高度发生变化（更长的文本等），您就会知道元素的总高度。
It would be easy to solve this problem using additional JS, but this is out of question for normal websites. So why don't we just add the ability in CSS to refer to current values and work with them?
使用额外的 JS 很容易解决这个问题，但这对于普通网站来说是不可能的。那么为什么我们不直接在 CSS 中添加引用当前值并使用它们的能力呢？
If you look into questions like this, you know what cases I mean:
如果你研究这样的问题，你就会知道我的意思是什么情况：
采纳答案by okoman
I'd say it is because CSS just defines how something is displayed by the browser. There is no flow of information back to the style sheets, or to say it in other words: CSS is not dynamic.
我会说这是因为 CSS 只是定义了浏览器如何显示某些内容。没有信息流回到样式表，或者换句话说：CSS 不是动态的。
If you know the height of an element and want to change it everytime the page is displayed you can generate a style sheet with PHP or other languages. Then you also know what's the half of the height and can set it also.
如果您知道元素的高度并希望在每次显示页面时更改它，您可以使用 PHP 或其他语言生成样式表。然后你也知道高度的一半是多少，也可以设置它。
If you don't know the height it would be a dynamic change. The browser would have to render the page at first, then determine the height of the element and send it back to CSS. There the line-height is computed and altered in the rendered page. But maybe therefore the overall height of the element changes , too. Now the browser had to go back to CSS again and so on...
如果您不知道高度，那将是一个动态变化。浏览器必须首先呈现页面，然后确定元素的高度并将其发送回 CSS。在渲染页面中计算和更改行高。但也许因此元素的整体高度也会发生变化。现在浏览器不得不再次回到 CSS 等等......
Just would not work. CSS is there to define the look of the page statically.
就是行不通。CSS 用于静态定义页面的外观。
回答by bobince
why it is not possible to do something like this in CSS: line-height: (height / 2)px;
为什么不能在 CSS 中做这样的事情： line-height: (height / 2)px;
Because that would make it very easy to introduce logical loops.
因为这样可以很容易地引入逻辑循环。
In this example, unless you explicitly set ‘height' (in which case it would also be easy to explicitly set ‘line-height'), the height of the element is dependent on the line-height of its content text, which is dependent on the height...
在这个例子中，除非你显式设置 'height'（在这种情况下，显式设置 'line-height' 也很容易），元素的高度依赖于它的内容文本的行高，它是依赖的在高度...
IE tried to provide this with the ‘expression()' syntax, but it doesn't really work. IE's approach was to have it recalculate step by step, so if you have an indeterminate expression it can keep redrawing your elements constantly as the expression's value changes. For an example of how this can go wrong, try:
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>
As you resize the browser window, the line-height, and hence offsetHeight will change, resulting in inconsistent layout. At a certain size the height will explode.
当您调整浏览器窗口的大小时，行高以及 offsetHeight 都会发生变化，从而导致布局不一致。在一定的大小高度会爆炸。
There is a case for allowing simple expressions containing only constants, eg.:
有一种情况允许只包含常量的简单表达式，例如：
line-height: (1em+4px);
but anything involving dynamically-calculated properties is as doomed to failure as IE's infamously-broken ‘expression()' syntax.
但是任何涉及动态计算属性的东西都注定会失败，就像 IE 臭名昭著的“表达式（）”语法一样。
回答by Mike
CSS3.1 defines calc() - it does exactly what you ask for. http://www.w3.org/TR/css3-values/#calc
CSS3.1 定义了 calc() - 它完全符合您的要求。http://www.w3.org/TR/css3-values/#calc
回答by Chris
回答by Michael
There has been development on this. Still not 100% ready but it is interesting. I hope this helps anybody coming to this page in the future!
这方面已经有了发展。仍然没有 100% 准备好，但很有趣。我希望这有助于将来访问此页面的任何人！
回答by Marc Gravell
Why is it "out of question for normal websites"? jQuery can do a lot of this fairly easily...
为什么“对于普通网站来说是不可能的”？jQuery 可以很容易地完成很多这样的事情......
IE does support calculations in styles, but it is not recommended, performs like a dog, and is completely incompatible with everything else.
IE确实支持样式计算，但是不推荐，性能跟狗一样，和其他的完全不兼容。
