本文由根据的《》所译，整个译文带有我们自己的理解与思想，如果译得不好或不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：，以及作者相关信息

——作者：

——译者：

处理CSS的浏览器兼容性和解决技术问题才能尽显前端开发人员真正的魅力。没有项目可做的情况之下，我终于有了一次机会使用cale()函数的经验。

使用，您可以通过计算来确定CSS属性值。

如果你还从未接触过calc()，你可以通过阅读《》一文来了解有关于calc()的基础知识——大漠

我想你可能知道，我也知道你已经看到这些，甚至在首页尝试使用过：

div{    width: calc( 100% - 2.5em ); background-position: calc( 50% + 50px ); margin: calc( 1.25rem - 5px ); }

正如你所看到的，编写calc()需要一个更高的CSS水平。它是如此强大，前端开发人员不知道如何处理它。现在主流的浏览器(Android4.4)都。

明智的做法就是开始使用它。

情况

想象一上这种标准，是多么的痛苦：主内容和侧边栏通过浮动并列在一起，两者之间有一个间距。

通常有一个容器包含了两个div，并且设置样式：

HTML

    
 
     
      Content
     
 
     
      Sidebar
     
 
    

CSS

.container:after,.container:before { content:""; display: table; } .container:after { clear:both; overflow: hidden; } .container { zoom:1; } .container, .content, .sidebar{ box-sizing: border-box; color: #fff; } .container{ width: 100%; max-width: 80em; /* 1280 */ padding: 2.5em; /* 40 */ background: #eee; } .content, .sidebar { padding:10em 1.25em; } .content{ width: 80%; /* 960 */ float: left; background: #8ac233; } .sidebar{ width: 16.666%; /* 200 */ float: right; background: #8ac233; } @media only screen and (max-width: 40em) /* 640 */{ .content, .sidebar{