calc是英文單詞calculate(計算)的縮寫,是css3的一個新增的功能,你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。
以前我們可以使用box-sizing:border-box;來設置盒子的屬性為不加上邊距。現在我們又多了一個選擇了。但要注意,兩者只能使用一個哦,否則就會造成沖突了。
怎么使用
calc()可以使用數學運算中的簡單加(+)、減(-)、乘(*)和除(/)來解決問題,而且還可以根據單位如px,em,rem和百分比來轉化計算。
比如三局平均分布的布局,中間間距為5像素。
*{margin: 0; padding: 0;}.col-3{width: calc(100%/3 - 5px); float: left; margin-right: calc(5px*3 /2); background: #eee; color: #333; height: 100px; text-align: center; margin-bottom: calc(5px*3 /2); font-size: 18px; line-height: 100px;}.col-3:nth-child(3){margin-right: 0;}