CSS的值计算

作为Web开发人员,如果存在价值计算等问题,您经常遇到可能很容易解决的问题.

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

line-height: (height / 2)px;

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

在您知道元素的固定高度的情况下,您不需要这样做.但是一旦高度发生变化(较长的文本等),您就会知道元素的总高度.

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

如果你研究这样的问题,你知道我的意思是:

你能不使用表格来做这个html布局吗？

bobince.. 13

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

因为这会使引入逻辑循环变得非常容易.

在这个例子中,除非你明确设置'height'(在这种情况下也很容易明确设置'line-height'),元素的高度取决于其内容文本的行高,这是依赖的在高度......

IE试图用"表达式()"语法提供它,但它并没有真正起作用.IE的方法是逐步重新计算,所以如果你有一个不确定的表达式,它可以随着表达式的值的变化不断重新绘制元素.有关如何出错的示例,请尝试:

    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.

在调整浏览器窗口大小时,行高,因此offsetHeight将更改,从而导致布局不一致.在一定的尺寸下,高度会爆炸.

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

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

但任何涉及动态计算属性的事情都是因为IE的臭名昭着的'expression()'语法而失败.

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

因为这会使引入逻辑循环变得非常容易.

在这个例子中,除非你明确设置'height'(在这种情况下也很容易明确设置'line-height'),元素的高度取决于其内容文本的行高,这是依赖的在高度......

IE试图用"表达式()"语法提供它,但它并没有真正起作用.IE的方法是逐步重新计算,所以如果你有一个不确定的表达式,它可以随着表达式的值的变化不断重新绘制元素.有关如何出错的示例,请尝试:

    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.

在调整浏览器窗口大小时,行高,因此offsetHeight将更改,从而导致布局不一致.在一定的尺寸下,高度会爆炸.

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

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

但任何涉及动态计算属性的事情都是因为IE的臭名昭着的'expression()'语法而失败.

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

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

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

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

只是不会工作.CSS用于静态定义页面的外观.