【简介】
calc()是css3的一个新增的功能，用来指定元素的长度，你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。为何它是动态的？因为它是通过计算来决定属性的长度的。
【calc()的运算法则与注意点】
- 使用 "+"、"-"、"*" 和 "/" 运算
- 可以使用百分比、px、em、rem等单位运算
- 可以混合使用各种单位进行运算
- 需要注意的是，运算符前后都需要保留一个空格
【浏览器的兼容性】
在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持，使用时同样在其前面加上各浏览器厂商的识别符前缀
[CSS] 纯文本查看 复制代码
.element {
-moz-calc(expression); /*火狐*/
-webkit-calc(expression); /*谷歌*/
-o-calc(expression);
-ms-calc(expression);
calc(expression);
}
【案例】
1. 如果，左边的盒子是一个固定的宽度，右边盒子是一个响应式的宽度，如图所示的效果
案例演示效果
案例代码
[HTML] 纯文本查看 复制代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{ padding: 0; margin: 0; }
.box{ margin-top: 20px; }
.left,.right{ float: left; }
.left{ width: 200px; height: 200px; background-color: lightblue; margin-right: 20px; }
.right{ width: calc( 100% - 200px - 20px); height: 200px; background-color: lightpink; }
.clearfix::after{ content: ""; display: block; clear: both; height: 0; }
</style>
</head>
<body>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>2. 如果卡片与卡片之间没有距离，那写 width: 33.33%是没有什么问题的
那如果是以下这种情况呢，图片与图片之间的距离是 20px
每个盒子设置width: calc((100% - 40px)/3)就可以了
收藏
淘帖
踩
