什麼是calc()?
calc()從字面我們可以把他理解為一個函數function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們使用的運算式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。
文法
calc() = calc(四則運算)
例如：
.elm { width: calc(expression);}
其中"expression"是一個運算式，用來計算長度的運算式
說明
用於動態計算長度值。
需要注意的是，運算子前後都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支援 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先順序規則；
相容性
簡單的例子：
<!DOCTYPE html><html lang="zh-cmn-Hans"><head><meta charset="utf-8" /><title>calc()函數_CSS參考手冊_web前端開發參考手冊系列</title><meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /><style>.test { width: calc(100% - 50px); background: #eee;}</style></head><body><p class="test">我的寬度為100% - 50px</p></body></html>
下面就來講解下最常用的這個：實現捲軸出現頁面不跳動的應用
當頁面內容動態載入，開始沒有捲軸，內容增多後出現捲軸，這時使用固定寬度置中對齊布局會向左位移一個捲軸寬度。解決方案可以給內容全部添加overflow-y:scroll;或者是根據內容用css填充好再補充內容。本文介紹的是calc來計算捲軸寬度，當有捲軸時，內容外部也給它類比一個捲軸寬度，因而就不會位移了。·
很簡單，只要一行代碼就搞定了：
.wrap-outer { margin-left: calc(100vw - 100%);}
或者：
.wrap-outer { padding-left: calc(100vw - 100%);}
首先，.wrap-outer指的是置中定寬主體的父級，如果沒有，建立一個（使用主體也是可以實作類別似效果，不過本著寬度分離原則，不推薦）；
然後，calc是css3中的計算，IE10+瀏覽器支援，IE9瀏覽器基本支援(不能用在background-position上)；
最後，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，捲軸寬度也計算在內！而100%是可用寬度，是不含捲軸的寬度。
於是，calc(100vw - 100%)就是瀏覽器捲軸的寬度大小（如果有，如果沒有捲軸則是0）！左右都有一個捲軸寬度（或都是0）被佔用，主體內容就可以永遠置中瀏覽器啦，從而沒有任何跳動！
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
css3的pointer-events使用詳解
focus-within的使用詳解
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
