HTML5中的长度值动态计算

时间：2014-6-10

当混合单位时,一个新的值函数可以消除像北京网站建设页面中上一篇所提及的所有问题.这个函数被称为calc(),有了它,就可以在进行简单计算时使用任何数计数的长度单位,其最简单的形式是,提供给函数的参数为两个数字和一个数学运算符:
  E{height:calc(10px+10px);}
  为了兴一个更实际的例来说明其性能,本节现次回顾前文中那个含有三个栏的示例.如果想要将中间栏左右两侧的边界宽度设置为4px,而将填充和页边距分别设置为10px和20px,则可以像之前一样使用box-sizing来设置边界和填充,但本例还使用calc()函数将页边距的宽度从总宽度中减去;
  F{
    border:4px solid black;
    border-width:0 4px;
    box-sizing:border-box;
    margin:0 20px;
    padding:0 10px;
    width:calc(50% - 40px);
  }
  还可以用calc值代替box-sizing来设置宽度,甚至通过使用不同的长度单位来混合这些值,下面的救命对页边距使用了em单位,并在将边界,填充和边距从总宽度中减去之前,使用一个calc()函数来计算它们的相对宽度;
  F{
     border:4px solid black;
     border-width:0 4px;
     margin:0 20px;
     padding:0 1em;
     width:calc(50% - calc(48px+2em));
  }
  但是,calc()不仅可以被用于width或height属性,还可以被用于任何允许使用长度值的属性和函数.