在很早以前踩麦，就知道CSS3有一個計算函數(shù)calc()，但一直沒有深入了解囚聚。今天在別人的博客上偶然看到了關(guān)于calc的詳細介紹靖榕，于是燃起了深入了解此特性的想法。
原文地址: 細談CSS3之calc
什么是Calc
calc是英文單詞calculate的縮寫顽铸，是css3的一個新增的功能茁计，用來指定元素的長度。比如說，你可以使用calc()給元素的border星压、margin践剂、pading、font-size和width等屬性設(shè)置動態(tài)值娜膘。為何說是動態(tài)值呢?因為我們使用的表達式來得到的值逊脯。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬高竣贪。
如何使用
calc()使用通用的數(shù)學運算規(guī)則军洼，但是也提供更智能的功能：
- 使用“+”、“-”演怎、“*” 和 “/”四則運算匕争；
- 可以使用%、px爷耀、em甘桑、rem等單位；
- 可以混合使用各種單位進行計算歹叮；
- 表達式中有“+”和“-”時跑杭，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的咆耿；
- 表達式中有“*”和“/”時德谅，其前后可以沒有空格，但建議留有空格票灰。
使用起來其實很簡單女阀，比如:
.box {
width: calc(50% + 2em);
height: calc(100% - 2em);
background-color: #f00;
}
兼容性
查詢結(jié)果來自: https://caniuse.com/#search=calc
image
總體上宅荤，兼容性還不錯屑迂，本人目前主要針對移動端做開發(fā)，還過得去冯键。
