您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)CSS中數(shù)學(xué)表達(dá)式calc()的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù),主要用于數(shù)學(xué)運(yùn)算。使用calc()為頁面元素布局提供了便利和新的思路。本文將介紹calc()的相關(guān)內(nèi)容
定義
數(shù)學(xué)表達(dá)式calc()是calculate計(jì)算的縮寫,它允許使用+、-、*、/這四種運(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)算符兩邊一定要有空白符
<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è)沒有空白符,所以失效 */ 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">測試文字一</div> <div class="test2">測試文字二</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>
關(guān)于“CSS中數(shù)學(xué)表達(dá)式calc()的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。