?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
calc() = calc(四則運(yùn)算)
需要注意的是,運(yùn)算符前后都需要保留一個(gè)空格,例如:width: calc(100% - 10px)
;
任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算;
calc()函數(shù)支持 "+", "-", "*", "/" 運(yùn)算;
calc()函數(shù)使用標(biāo)準(zhǔn)的數(shù)學(xué)運(yùn)算優(yōu)先級(jí)規(guī)則;
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-8.0 | 2.0-3.6 | 4.0-18.0 | 3.1-5.1 | 15.0+ | 3.2-5.1 | 2.1-4.3 | 18.0 |
9.0 #1 | 4.0-15.0 -moz- | 19.0-25.0 -webkit- | 6.0 -webkit- | 6.0-6.1 -webkit- | 4.4-4.4.4 #2 | 19.0-25.0 -webkit- | |
10.0+ | 16.0+ | 26.0+ | 6.1+ | 7.0+ | 26.0+ |
當(dāng)在 background-position中使用calc()
時(shí)將會(huì)導(dǎo)致瀏覽器崩潰;
部分版本在使用calc()
時(shí),乘法和除法可能無效;
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>calc()函數(shù)_CSS參考手冊(cè)_web前端開發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { width: calc(100% - 50px); background: #eee; } </style> </head> <body> <div class="test">我的寬度為100% - 50px</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例