会计算的属性calc（）

2017-10-19

前言

之前在解决图片自适应问题时，同事提到了一个CSS3的计算属性calc()。原谅我，之前从来没有见过，今天通过学习之后，发现它的确非常方便使用。

1.什么是calc()?

calc()用于计算，比如border、margin、pading、font-size和width等属性设置动态值；
支持的运算单位： rem , em , % , px, vh(所占视口宽度的百分比), vw(所占视口高度的百分比)等；
使用“+”、“-”、“*” 和 “/”四则运算，计算优先级别和数学一致；
运算符两边必须有空格，否则会报错；
兼容性：

firefox 4.0+已经开支支持calc()功能，需要使用-moz-calc()私有属性；

chrome从19 dev版，开始支持私有的-webkit-calc()写法；

IE9支持原生写法，calc()；

Safari6+较好支持，

Opera貌似还不支持～

2.calc()解决设置padding需要计算的问题

之前写css的时候，最不喜欢的就是给div设置padding值了，现在使用calc()快速写出运算表达式就可以了，不用自己计算出结果。比如：

div{
    padding:0 20px; 
   /*注意：运算符两边必须有空格*/
  	width: -moz-calc(100% - 40px);   /*兼容火狐浏览器*/
    width: -webkit-calc(100% - 40px); /*兼容谷歌浏览器*/
    width: calc(100% - 40px);
    hieght: 100%;
}

3.简单快速解决布局问题

之前解决稍微复杂点的布局，总是利用各种定位来实现，这种体验并不好。现在使用calc()就可以快速解决布局。比如：

实现顶部、底部固定高度，中间高度自适应；

中间左边侧边栏固定宽度，中间右边主要内容部分宽度自适应。

使用定位实现的代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .top{
            width: 100%;
            height: 40px;
            background: #000;
            color:#fff;
            position:absolute;
            top:0;
            text-align:center;
            line-height:40px;
        }
        .bottom{
            width:100%;
            height:40px;
            background:#000;
            color:#fff;
            position:absolute;
            bottom:0;
            text-align:center;
            line-height:40px;
        }
        .mainBox{
            width:100%;
            position:absolute;
            top:40px;
            bottom:40px;
        }
        .mainBox .left-slide{
            height:100%;
            width:200px;
            float:left;
            overflow: auto;
            border:6px solid green;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            text-align:center;
            line-height:40px;
        }
        .mainBox .main-content{
            height:100%;
            border:6px solid crimson;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            overflow: auto;
            text-align:center;
            line-height:40px;
        }
    </style>
</head>
<body>
<div class="top">顶部</div>
<div class="mainBox">
    <div class="left-slide">左边侧边栏</div>
    <div class="main-content">主要内容，自适应</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

使用calc()实现的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .top,.bottom{
            height: 40px;
            width:  100%;
            background-color: #000000;
        }
        .mainBox{
            height: calc(100vh - 80px);
            width: 100%;
        }
        .left-slide{
            float: left;
            width: 100px;
            height: calc(100% - 12px);
            background-color: #ffffff;
            border:6px solid green;
        }
        .main-content{
            float: left;
            width: calc(100% - 100px - 4*6px);
            height: calc(100% - 12px);
            background-color: #fff;
            border:6px solid crimson;
        }
    </style>
</head>
<body>
<div class="top">顶部</div>
<div class="mainBox">
    <div class="left-slide">左边侧边栏</div>
    <div class="main-content">主要内容，自适应</div>
</div>
<div class="bottom">底部</div>
</body>
</html>

是不是简单很多！:haha:

4.实现flex布局

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 Calc</title>
    <style type="text/css" media="screen">
        html{
            font-size:100%;
        }
        .wrapper{
            width:100%;
            border:5px solid #f00;
            margin:10px ;
            box-sizing:border-box;
            height:200px;
        }
        .items{
            float:left;
            height:calc(100% - 40px);
            border:1px solid #f70;
            text-align:center;
            margin: 20px;
            border:3px solid #0F16C6;
            width:calc(100% / 3 - 46px)
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="items">A</div>
    <div class="items">B</div>
    <div class="items">C</div>
</div>
</body>
</html>