Welcome, Old Sport!

了解CSS3中的calc()功能

by ilikecss ON 2013/02/21 4031

了解CSS3中的calc()功能在上篇文章CSS3实用代码片段实例中我们提到过CSS3的calc()功能,实在是工作中用不到,所以了解它的人很少,最近看了w3cschool介绍后发现还是有很多东西可以挖掘的,在日后CSS3逐步普及后会很多地方用到此功能。在这篇文章中大家就一起来了解和认识一下吧。

什么是calc()

在CSS运用中可以进行简单的数学运算的功能。比如+-,*,/最基本的四则运算。它的CSS写法是:

width: calc(100% / N - X + Y); /*括号内是运算内容公式*/

接着上面说,首先我们来看一个Demo更加形象的了解一下实际效果。

Demo中外层盒子模是固定为800px,针对外层设置了3种尺寸盒子模型,它们分别是外层盒子模型的1/2,1/3,1/4大小,用的计算公式分别是:calc(100% / 2),calc(100% / 3),calc(100% / 4); 请参考下面这张截图:

DEMO截图

从以上截图可以看出运算结果还是很精确的。

一些注意点

  • calc是从左道右进行计算的,当然是符合运算规则的,先加减后乘除!
  • 目前支持的浏览器不多,请对照下面的支持表格!
  • 一些浏览器要写hack前缀,-moz-,-webkit-
  • calc的浏览器支持表
  • 国外参考文章
  • 还有许多功能目前正等待测试开发中!
4条评论
  1. #1

    sui说道:

    来看看 :evil:

  2. #2

    谦哥说道:

    我第一次看到品质如此高的国人博客,主站也不赖 :neutral:




TOP