[CSS]巧用calc()函數布局
在第一次接觸CSS時就驚訝於它的神奇，幾句簡單的代碼就可以做出五彩繽紛的頁面效果。就如CSS被發明的初衷既是我們需要什麼功能，它就提供給我們什麼功能。但有一個問題是，CSS是靜態的，完全沒有邏輯操作。可CSS里的calc函數卻打破了這種趨勢，它提供了程序員使用CSS編程計算的能力。
calc()語法 calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
width: calc(expression);
其中」expression」是一個表達式，用來計算長度的表達式。
calc()的運算規則 calc()使用通用的數學運算規則，但是也提供更智能的功能：
- 使用「+」、「-」、「*」 和 「/」四則運算；
- 可以使用百分比、px、em、rem等單位；
- 可以混合使用各種單位進行計算；
- 表達式中有「+」和「-」時，其前後必須要有空格，如」widht: calc(12%+5em)」這種沒有空格的寫法是錯誤的；
- 表達式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。
calc()的兼容性
calc()能做什麼
比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。有了它，在指定元素高度或寬度或大小時，你可以基於計算進行設定，而不是簡單的使用固定數值。
例子
1、使用 calc() 可以很容易的為一個對象設置一個左右兩邊相等的外邊距。在這個例子中，創建一個div，該div左右兩邊各有一個距離窗口邊緣50像素的間距。
.div {
position: absolute;
left: calc(50px);
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 6px;
text-align: center;
}
源代碼鏈接：
JS Bin
因為div的寬度是動態變化的，所以使用calc()的最大好處就是用在布局上面。可以看到上面例子中的div的寬度是自適應於屏幕的，隨著屏幕的寬度變化而變化。如果不太清楚的話我們下面在舉個例子詳細的說明下。
2、三列並排，寬度按百分比、有padding值、有border值、還有margin，而且這三個值是px，
- html代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
* {
margin: 0;
padding: 0;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
ul {
margin: 20px;
background-color: yellow;
}
li {
float: left;
width: 33.3333%;
padding: 10px;
margin: 10px;
background: #FF6666;
border: 5px solid #DAC8A7;
list-style-type: none;
text-align: center;
}
</style>
</head>
<body>
<ul class="clearfix">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</body>
</html>
效果：
結果沒有並列，在這種情況下即使算出來也有那麼一點誤差，不是嗎？現在我們就用到了calc()，可以做到讓瀏覽器幫我們計算寬度。
* {
margin: 0;
padding: 0;
}
?
.clearfix::after {
content:"";
display:block;
clear:both;
}
?
ul {
margin: 20px;
background-color: yellow;
}
?
li {
float:left;
/* width:33.3333%; */
width:calc(100%/3 - (10px + 10px + 5px) * 2);
padding:10px;
margin:10px;
background:#FF6666;
border:5px solid #DAC8A7;
list-style-type: none;
text-align: center;
}
calc括弧重的表達式為：width-(padding+border+margin)2，建議加 （+）、減（-）、乘（）、除（/）前後都有空格。雖然乘除符號前後可以不用空格，但為了統一和美觀我自己就全部留空格了。
最終效果：
源代碼鏈接：
JS Bin在實際項目中需要多少個並列，直接等比分就好了。現在就做到了完全自適應頁面的布局了。
推薦閱讀：