文法 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=)