平缓的、山坡上镶嵌着一块块粉红色的荞麦田，路边铺着碧绿的青稞地，圆木建成的围栏顺着弯弯曲曲的土路，一直通向远方的原始森林，藏式吊脚楼错落有致地分布在路旁，煮奶茶的淡蓝色烟雾中，牛群、羊群时隐时现，整个氛围呈现着一种中世纪乡土意味。
在HTML页面的DIV布局中，如果我们把DIV的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，CSS中的一个关于计算的函数 calc()
calc() 函数介绍
calc()：英文单词calculate(计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。
calc() 函数定义
1、calc() 函数可以计算任何长度的值
2、calc() 函数支持 "+", "-", "*", "/" 运算；
3、calc() 函数使用标准的数学运算优先级规则；
4、特别要注意的是，运算符前后都需要一个空格。
5、现代浏览器都支持 calc() 函数
calc() 函数的语法
calc(expression)
expression：一个数学表达式，会返回表达式所计算出的值
示例：
width: calc(100% - 10px)；
calc() 函数用法示例
示例1：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div{
width: 100px;
height: 100px;
position: relative;
background-color: bisque;
}
.div2{
width: 20px;
height: 20px;
background-color: blueviolet;
position: absolute;
/*计算结果：60px*/
top: calc(100% - 40px) ;
/*计算结果：50px*/
left: calc(100% - 50px) ;
}
</style>
</head>
<body>
<!---->
<div class="div">
<div class="div2"></div>
</div>
</body>
</html>运行结果如下图：
CSS代码解释：
top: calc(100% - 40px) ; left: calc(100% - 50px) ;
相当于
top: 60px; left: 50px;
示例2：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div{
width: 200px;
height: 100px;
position: relative;
background-color: bisque;
}
.div2{
width:50px;
height: 100px;
background-color: aqua;
display: inline-block;
}
.div3{
width: calc(100% - 60px);
height: 100px;
background-color: brown;
display: inline-block;
float: right;
}
</style>
</head>
<body>
<!---->
<div class="div">
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>运行结果如下图：
css代码解释：
width: calc(100% - 60px);
相当于
width: 140px;
本文CSS calc() 函数的介绍与如何使用方法到此结束。欲望得不到满足痛苦；欲望一旦满足就无聊，生命就是在痛苦和无聊之间摇摆。小编再次感谢大家对我们的支持！
