css3的calc()

本文出自：https://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

calc是css3新增的一個功能，用來指定元素的長度，如說，你可使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。爲什麼說是動態值呢?由於咱們使用的表達式來獲得的值。不過calc()最大的好處就是用在流體佈局上，能夠經過calc()計算獲得元素的寬度。

calc()能作什麼？

calc()能讓你給元素的作計算，你能夠給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，好比說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素DIV的寬度值究竟是多少，而把這個煩人的任務交由瀏覽器去計算.

calc()語法

calc()語法很是簡單，就像咱們小時候學加 （+）、減（-）、乘（*）、除（/）同樣，使用數學表達式來表示

.elm{
    width:calc(expression)          
}

其中expression是一個表達式，用來計算長度的表達式。
calc()運算規則

calc()使用通用的數學運算規則，可是也提供更智能的功能：

1. 使用「+」、「-」、「*」 和 「/」四則運算；
2. 可使用百分比、px、em、rem等單位；
3. 能夠混合使用各類單位進行計算；
4. 表達式中有「+」和「-」時，其先後必需要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
5. 表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

例子

<div class='demo'>
     <div class='box'></div>
</div>

.demo{
   width:300px;
   background:#60f;            
}
.box{
   width:100%,
   background:#f60;
  height:50px;  
}

 

第二步驟：，在div.box上添加border和padding

 

.demo {
    width: 300px;
    background: #60f;
}
.box {
  width: 100%;
  background: #f60;
  height: 50px;
  padding: 10px;
  border: 5px solid green;
}

 

 這個時候div.box的寬度大於了其容器div.demo的總寬度，從而撐破容器伸出來了

第三步：calc()的運用

爲了解決撐破容器的問題，之前咱們只能去計算div.box的寬度，用容器寬度減去padding和border的值，但有時候，咱們苦於不知道元素的總寬度，好比說是自適應的佈局，只知道一個百分值，但其餘的值又是px之類的值，這就是難點，死卡住了。隨着CSS3的出現，其中利用box-sizing來改變元素的盒模型類型實使實現效果，但今天咱們學習的calc()方法更是方便。

知道總寬度是100%，在這個基礎上減去boder的寬度（5px * 2 = 10px）,在減去padding的寬度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最終獲得的值就是div.box的width值：

.demo {
    width: 300px;
    background: #60f;
    padding: 3px 0;
}
.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*寫給不支持calc()的瀏覽器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}