這篇文章主要為大家詳細(xì)介紹了css中的數(shù)學(xué)表達(dá)式calc()使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、長沙縣網(wǎng)絡(luò)推廣、小程序定制開發(fā)、長沙縣網(wǎng)絡(luò)營銷、長沙縣企業(yè)策劃、長沙縣品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們最大的嘉獎;成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供長沙縣建站搭建服務(wù),24小時(shí)服務(wù)熱線:18982081108,官方網(wǎng)址:bm7419.com
數(shù)學(xué)表達(dá)式calc()是CSS中的函數(shù),主要用于數(shù)學(xué)運(yùn)算。使用calc()為頁面元素布局提供了便利和新的思路。
定義
數(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)算符兩邊一定要有空白符
實(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è)沒有空白符,所以失效 */ border: calc(1px+1px) solid black; /* 對于,不能小于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>
以上就是css中的數(shù)學(xué)表達(dá)式calc()使用方法的簡略介紹,當(dāng)然詳細(xì)使用上面的不同還得要大家自己使用過才領(lǐng)會。如果想了解更多,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道哦!
分享題目:css中的數(shù)學(xué)表達(dá)式calc()使用方法
文章分享:http://bm7419.com/article6/gijeog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供域名注冊、用戶體驗(yàn)、營銷型網(wǎng)站建設(shè)、外貿(mào)建站、響應(yīng)式網(wǎng)站、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)