您好,登錄后才能下訂單哦!
小編給大家分享一下CSS中數(shù)學(xué)表達(dá)式calc()的用法,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù),主要用于數(shù)學(xué)運(yùn)算。使用calc()為頁(yè)面元素布局提供了便利和新的思路。
定義
數(shù)學(xué)表達(dá)式calc()是calculate計(jì)算的縮寫(xiě),它允許使用+、-、*、/這四種運(yùn)算符,可以混合使用%、px、em、rem等單位進(jìn)行計(jì)算
兼容性: IE8-、safari5.1-、ios5.1-、android4.3-不支持,android4.4-4.4.4只支持加法和減法。IE9不支持用于backround-position
注意:+和-運(yùn)算符兩邊一定要有空白符
實(shí)例如下:
<style> .test1{ border: calc( 1px + 1px ) solid black; /* calc里面的運(yùn)算遵循*、/優(yōu)先于+、-的順序 */ width: calc(100%/3 - 2*1em - 2*1px); background-color: pink; font-style: toggle(italic, normal); } .test2{ /* 由于運(yùn)算符+的左右兩側(cè)沒(méi)有空白符,所以失效 */ border: calc(1px+1px) solid black; /* 對(duì)于,不能小于0的屬性值,當(dāng)運(yùn)算結(jié)果小于0時(shí),按0處理 */ width: calc(10px - 20px); padding-left: 10px; background-color: lightblue; } </style> <div class="test1">測(cè)試文字一</div> <div class="test2">測(cè)試文字二</div>
應(yīng)用
數(shù)學(xué)表達(dá)式calc()常用于布局中的不同單位的數(shù)字運(yùn)算
<style> p{margin: 0;} .parent{overflow: hidden;zoom: 1;} .left{float: left;width: 100px;margin-right: 20px;} .right{float: left;width: calc(100% - 120px);} </style> <div class="parent" style="background-color: lightgrey;"> <div class="left" style="background-color: lightblue;"> <p>left</p> </div> <div class="right" style="background-color: lightgreen;"> <p>right</p> <p>right</p> </div> </div>
以上是“CSS中數(shù)學(xué)表達(dá)式calc()的用法”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。