在css中，我們常常需要計算功能。以前我們常常使用js來進行計算，然後佈局，但是爲了更符合MVC結構的概念，css中calc函數已經開始被廣泛使用。
calc函數允許進行任何長度值的計算，運算符包括“+”，“-”，“ * ”，“ / ”等。
但是需要注意的是，運算符前後最好都要有一個空格。
都是技術人員，下面，我將通過使用場景和代碼來與大家共同探討calc。
場景一
如圖所示，圖中的內容一旦超過了浮動元素的高，那麼這些文本就會與圖片左對齊，但是我們需要形成圖二的效果。（img的大小是百分比）
那有人說，要實現這樣的效果也很簡單，給這段文本添加一個左邊距maigin-left即可。沒問題。確實要加上margin-left。但是如果是簡單的：margin-left：10px；則會出現如下圖的效果：
如果使用calc，就可以實現如圖二所示效果；
具體代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding: 0;
}
div{
border: 1px solid black;
margin: 0 auto;
width: 200px;
}
img{
width: 50%;
float: left;
}
p{
margin-left: calc(50% + 10px);
/*margin-left: 10px;*/
}
</style>
</head>
<body>
<div>
<img src="C_79.png" alt=""/>
<p>這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>
</div>
</body>
</html>場景二
一排擺放四個img，每個img加margin的大小是25%；那就會產生一個問題。如圖所示：
導致這個問題的原因是代碼中的width：25%；並沒有減去10px的margin-left；
因此只需用 width:calc(25% - 10px);即可
最終效果如圖：
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding: 0;
}
div{
border: 1px solid black;
margin: 0 auto;
width: 400px;
height: auto;
float: left;
}
img{
width: calc(25% - 10px);
float: left;
margin-left: 10px;
}
</style>
</head>
<body>
<div>
<img src="C_79.png" alt=""/>
<img src="C_79.png" alt=""/>
<img src="C_79.png" alt=""/>
<img src="C_79.png" alt=""/>
</div>
</body>
</html>場景三
結合媒體查詢@media 就十分容易實現一個響應式佈局。
calc今天就聊到這裏。各位看官如果有任何疑問，請在博文下回複評論即可。
摯謝閱讀。