讲到网站建设我们第一想到的往往就是DIV+CSS建站模式，CSS建站不论是在兼容上还是由其SEO优化上都是不错的选择。之前笔者小丹分享过很多关于CSS的文章，多是在CSS建站的各个局部命令执行上。今天依然如此，不过分享的是CSS的执行样式：CSS calc()。

    首先，我们要知道CSS calc()属性表达式允许我们在样式表执行简单的计算。下面是我们常见到的应用比较广泛的规则集展示CSS的使用calc()：

    .container {
                height: calc(100% - 50px);
                width: calc(100% - 40px);
                }

    正如你所看到的在上面的例子中，CSS calc()属性表达式允许我们动态地计算结果之间的减两个CSS长度值正确的样式表不使用JavaScript，即使不共享相同的单位长度值。

    CSS calc()属性表达式中，在我们只能用CSS进行算术计算 calc()：

    加(+)

    减(-)

    乘法(*)

    除法(/)

    在Css calc()适用于许多类型的数值CSS值：

    长度

    时间
 
    角

    频率

    没有单位的整数和数字

    还有就是，Css calc()不能使用CSS颜色值、CSS和其他类型的值。

    用例

    CSS的价值 calc()很快可以看到当我们执行数学计算与不同的CSS数值单位，时变得更加有用的值是一个相对和固定单位的混合物。

    那么就让让我们先来谈一个实例，我们不应该使用 calc()属性表达式。

    反例

    /* Do not do this! */
    div {
         width: calc(600px / 2);
        }

    在上面的样式规则中，我们执行计算就可以很容易地做自己。以便我们的CSS是更具可读性，并避免不必要的浏览器计算，可以减缓我们的网页，如果我们拿出一个真正的计算器和做数学自己：

    div{
        width: 300px;
       }

    那么，在哪里使用CSS calc()？

    Css calc()成为一个伟大的资产的单位是一个相对单位，另一个则是固定的。这种谈判的能力在不同的CSS网页设计单位尤其精彩的敏感。

    下面的一个例子为中心的容器,总有20 px利润在其左和右,无论屏幕尺寸:

    .container {
                margin: 0 auto;
                width: calc(100% - 40px);
               }

    视图的例子

    在这个用例的CSS calc()中我们能够占据一个垂直滚动条，确保可读性安慰我们的内容不管使用什么设备。流体容器归心这种方法只需要最小的CSS和HTML。其他响应设计技术实现相同的结果需要更多的代码，并且可能需要之类负利润、媒体查询和不相干的嵌套的HTML容器元素。

    规范的地位

    CSS的规范calc()描述的是W3C CSS值和单位模块3，这个模块是在W3C候选推荐标准(CR)状态，这意味着它是两个层次被终结。

    记住现在CSS calc()是三个CSS功能模块中挑出的规格是被下降的危险。

    The following features are at-risk and may be dropped during the CR period: ‘calc()’, ‘toggle()’, ‘attr()’.

    浏览器支持

    目前CSS calc()在大约82%的浏览器支持在Web上使用数据显示从caniuse.com。Internet Explorer 9部分支持CSS calc()以及后续版本的浏览器有完整的功能支持。

    (转载请注明转自：www.wangzhan.net.cn，谢谢!珍惜别人的劳动成果，就是在尊重自己!）