calc 计算属性

calc 这个属性可以达到什么效果呢？通过计算函数，可以在不刷新浏览器的情况下，实时的让属性值发生变化，我们一起看看 calc 的使用吧。

1. 官方定义

calc() 函数用于动态计算长度值。

2. 慕课解释

calc()可以按照我们写的公式，在浏览器中进行计算，使用的时候，要注意：运算符的前后都需要保留一个空格，例如：width: calc(100% - 20px)； 中，- 号前后要有一空格。
它支持 “+”， “-”，“*”，“/” 运算；
calc() 函数使用标准的数学运算优先级规则。

3. 语法

.demo{
    /* property: calc(expression) */
    width: calc(100% - 80px);
}

解释：demo 的宽度 = 父元素总体宽度 – 80px 。

4. 兼容性

IE	Edge	Firefox	Chrome	Safari	Opera	ios	android
11	12+	16+	19+	6+	15+	6.1+	81

5. 实例

让 demo 的宽度比父级宽度小 200px。

.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height:100px;
    width: calc(100% - 20px);
}

效果图：

宽度比父级宽度小 200px 效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
       .demo{
            border:1px solid #ccc;
            height:100px;
            width: calc(100% - 20px) ;
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕课网：计算函数学习
        </div>
    </div>
</body>
</html>

使 demo 的宽度、高度为父元素的 1/3。

.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height: calc(100% /3);
    width: calc(100% /3);
}

效果图：

宽度、高度为父元素的 1/3 效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
        .demo{
            border:1px solid #ccc;
            height: calc(100% /3) ;
            width: calc(100% /3) ;
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕课网：计算函数学习
        </div>
    </div>
</body>
</html>

使 demo 的宽度、高度为父元素的 (100% + 200px) /3。

.out-box{
    border:1px solid #ccc;
    width: 200px;
    height: 200px;
}
.demo{
    border:1px solid #ccc;
    height: calc( (100% + 200px) /3);
    width: calc( (100% + 200px) /3);
}

效果图：

宽度、高度为父元素的 1/3 效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .out-box{
            border:1px solid #ccc;
            width: 200px;
            height: 200px;
        }
        .demo{
            border:1px solid #ccc;
            height: calc( (100% + 200px) /3) ;
            width: calc( (100% + 200px) /3) ;
        }
    </style>
</head>
<body>
    <div class="out-box">
        <div class="demo">
            慕课网：计算函数学习
        </div>
    </div>
</body>
</html>