CSS 的表达式 calc()

红薯 发布于 2010/06/11 06:52
阅读 833
收藏 2

当我需要一个网页元素的相对值时,不要让我使用 JavaScript 来干这事。

Paul Rouget 给我们展示了如何使用 CSS 的 calc() 函数来处理此事,不过这个函数在 Firefox 下有一个bug

下面是如何使用 calc 函数的代码示例:

/*
* Two divs aligned, split up by a 1em margin
*/
#a {
  width:75%;
  margin-right: 1em;
}
#b {
  width: -moz-calc(25% - 1em);
}
/*
 * Make sure input field won't overlap parent
 */
input {
  padding:2px;
  border:1px solid black;
  display:block;
  width: -moz-calc(100% - 2 * 3px);
}
/*
 * combine different units!
 */
width: -moz-calc(3px + 50%/3 - 3em + 1rem);
瞧瞧,大量的 JavaScript 被省掉了吧。

不过呢,这并不是标准的 CSS 做法,IE 肯定是不支持的。

加载中
0
神勇小白鼠
神勇小白鼠

ie 啊,算了吧,纯支持

0
candies
candies

呵呵,学习下,这种写法自己试过,但是写页面的时候没用过它,~~~~(>_<)~~~~ ,什么时候让IE消失吧

0
答复哈
答复哈

真高深~俺写CSS,也就在写width,background-image层次~

0
清凌渡
清凌渡

IE6 支持expression() ,参数里面可以写JS,可惜之后的版本就不支持了。。

0
我的收藏
我的收藏

表达式 貌似不是 W3c的标准吧?

0
SeekerLee
SeekerLee

非标准,和IE同流啦?

0
无量
无量

这是css3吧

返回顶部
顶部