CSS3实例教程:探索cal()功能


CSS3中有很多的隐藏的模块与功能。在这里我们将探索cal()功能;这个功能可能会改变你以前设计布局的方式,灰常的强悍~~

CSS3cal()功能是用来计算长度(lengths),数字(numbers),角度(angles),过渡(transition/动画时间(animation times)或者声音频率(sound frequencies)。它将允许你使用混合计算类型—在CSS3中也是一个异常强大的概念。

假设一个网站的设计要包含2个浮动的元素,你想要用一个60px的水平线将其分成2个相同宽度的元素,听起来似乎容易?如果页面设计的是960px,那么很容易,每个都是450px

但是如果改元素是一个浮动框或者动态的布局怎么办?如果页面设计的是600px,那么大部分的设计者将会将水平线设置为10%,剩下的各45%,在宽屏或者方屏的浏览窗口中将会变形或者有边距!

幸运的是,新功能cal()功能允许women计算宽度。在上面的例子中,我们就可以将其设置为总宽度的50%-30px,例如:

#element1, #element2 { float: left; width: calc(50% - 30px); } #element2 { margin-left: 60px; }

如果你想让水平线的大小是相对于字体大小儿定,如4em,没问题:

#element1, #element2 { width: calc(50% - 2em); }

或者你想要在元素周围放一个2pxborder,也没有问题:

#element1, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

笔者建议尽量是计算简洁些,但是复杂的计算是能够实现的,例如:

#element1, #element2 { width: calc((50% + 2em)/2 + 14px); }

该元素的浏览器支持情况:

Cla()功能是W3C推荐的功能,所以你会猜到哪个浏览器会一直支持?
也许你的猜测错了。在笔者写这篇文章的时候,只有IE9支持,Firefox也支持(需要其特有的前缀):-moz-cla()Webkit内核的浏览器目前还没有支持(如ChromeSafari)或者是Opera,改功能很有用的,相信用不了多久这些浏览器都会支持的。
幸运的是你可以在你的样式表(CSS )中使用增强样式:
element1, #element2 { width: 45%; /* all browsers */ width: -moz-calc(50% - 30px); /* Firefox 4+ */ width: calc(50% - 30px); /* IE9+ and future browsers */ }
请谨记你需要添加相应的调整(以面对不同的浏览器)。
#element2 { margin-left: 10%; /* all browsers */ margin-left: -moz-calc(60px); /* Firefox 4+ */ margin-left: calc(60px); /* IE9+ and future browsers */ }
CSS3 min() max()
如果你喜欢cal()元素,你可能也会细化min()max()功能,他们可以解释2个或2个以上用逗号隔开的元素值并且能够返回最大值或者最小值。
#myelement { width: max(300px, 30%, 30em); font-size: min(10px, 0.6em); }
这个功能在防止font过于大或者非常小的情况下很有用,但是不幸的是目前比较现代的浏览器都不支持min()max()功能,我们只能默默期待浏览器们支持吧~~

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3