CSS calc()

admin發表於2019-04-13
CSS

在介紹cal()具體用法之前，先對其進行一個總體介紹。

如果學習過JavaScript等程式語言，它的外觀非常像一個函式，功能也非常類似。

不妨認為它就是CSS中的一個函式，函式名稱calc是calculate的縮寫，翻譯成漢語具有"計算"的意思。

使用此函式可以動態的計算元素的一些屬性值，比如寬度、高度或者內外邊距等。

動態計算的需求在實際佈局中非常的多，特別是一些尺寸不固定的應用場景，比如響應式佈局。

所以對於calc()函式的掌握是必須的，在應用中也一定會體會到它的便利性，文章底部會有簡單的程式碼演示。

一.函式用法：

此函式可以動態計算出參數列達式的值。

語法結構：

[CSS] 純文字檢視 複製程式碼
calc(expression)

引數解析：

（1）.expression：必需，一個合法的數學表示式，函式會計算並返回此表示式的值。

引數數學表示式的規則如下：

（1）.表示式支援加減乘除四則運算。

（2）.運算子的兩側需要至少保持一個空格（乘除可以省略，但是建議保留）。

（3）.遵循數學的運算子優先順序規則。

（4）.在表示式中可以使用CSS中尺寸單位，比如px或者em等。

二.瀏覽器相容：

（1）.IE9+瀏覽器支援此方法。

（2）.edge瀏覽器支援此方法。

（3）.火狐瀏覽器支援此方法。

（4）.谷歌瀏覽器支援此方法。

（5）.Opera瀏覽器支援此方法。

（6）.safria瀏覽器不支援此方法。

三.程式碼例項如下:

假設有一個容器元素，寬度不固定，有一個子元素，具有5px的邊框與5px的內邊距。

想讓這個子元素鋪滿父容器元素，但並不溢位，如果設定子元素的寬度與高度都是100%，肯定會溢位。

那麼通過calc()函式可以很輕鬆計算出子元素正確的尺寸。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style> 
html,body{
  width:100%;
  height:100%;
}
#main {
  width:20%;
  height:20%;
  background-color:#ccc;
}
#main>div {
  border:5px solid blue;
  padding:5px;
  width:calc(100% - 5px*2 - 5px*2);
  height:calc(100% - 5px*2 - 5px*2);
  background-color:green;
}
</style>  
</head>
<body>
  <div id="main">
    <div></div>
  </div>
</body>
</html>

上述程式碼實現了我們的目的，看谷歌開發者工具截圖：

a:3:{s:3:\"pic\";s:43:\"portal/201904/13/234211ip4zffq4059cjzo4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}a:3:{s:3:\"pic\";s:43:\"portal/201904/13/234214van4upn4gqkcnznc.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

左邊的是容器的盒模型截圖，右側是子div的盒模型截圖。

由於容器div的尺寸不是固定的，所以很難給子div的尺寸一個固定的值。

也就是說由於容器的尺寸不固定，子元素的尺寸也可能隨時變化。

通過calc()函式進行動態計算是一個良好的選擇，核心程式碼如下：

[CSS] 純文字檢視 複製程式碼
width:calc(100% - 5px*2 - 5px*2);
height:calc(100% - 5px*2 - 5px*2);

對程式碼注意點說明如下：

（1）.遵循數學四則運算優先順序規則。

（2）.運算表示式中可以帶有單位，比如上面的px。

（3）.運算子兩側需要帶有空格，否則會報錯，但是乘除運算可以省略。

相關文章