语法 cacl(四则运算)
语义
calc 函数是css3计算函数，可以使用 * / - + 来计算值。calc函数也可以嵌套。
兼容性
浏览器大部分支持，
- = 支持
- = 不支持
- = 部分支持
| IE | Firefox | Chrome | Safari | Opera | IOS Safari | Android Browser | Android Chrome |
|---|---|---|---|---|---|---|---|
| 6.0-8.0 | 2.0-3.6 | 4.0-18.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0 |
| 9.0+ | 4.0-15.0 -moz- | 19.0-25.0 -webkit- | 6.0-6.1 -webkit- | 4.4-4.4.4 | 19.0-25.0 -webkit- | ||
| 16.0+ | 26.0+ | 6.1+ | 7.0+ | 26.0+ |
常用方式举例
.calc{
width: calc(100% - 50px) // 父元素宽 减去 50px
height: calc(100% + 50px) // 父 元素高 加上 50px
height: calc(50% - calc(50% - 30px)); // 嵌套calc 假设父元素高度为400px; 根据四则运算的先后规律，先算出右边的， 400 * 0.5 - 30px = 170px; 再算左边的，200 - 170px = 30px; 由此推算出 此元素的高为 30px;
width: calc(20% * 2 ) // 父元素宽的 20% * 2;
width: calc(20% / 2 ) // 父元素宽的 20% / 2;
}
实景用例
实现响应式 view
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<style>
ul{
display: flex;
padding-left: 0;
}
li{
list-style: none;
margin: 10px 15px;
width: calc( ( 100% - 15px * 2 * 3 ) / 3);
height: 200px;
background-color:palegoldenrod;
}
</style>
</head>
<body>
<ul>
<li>第一块</li>
<li>第二块</li>
<li>第三块</li>
</ul>
</body>
实现元素居中
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<style>
/** 垂直居中一个元素 **/
.div{
position: absolute;
width: 400px;
height: 400px;
top: calc((100% - 400px) / 2);
left: calc((100% - 400px) /2);
background-color:palegoldenrod;
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
参考文献：http://caibaojian.com/css3-calc.html
谢谢观看！
![CSS的伪元素和伪类的区别[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)