[點晴永久免費OA][轉(zhuǎn)帖]手拿把掐拿捏calc()計算函數(shù)
當(dāng)前位置：點晴教程→點晴OA辦公管理信息系統(tǒng)
→『 經(jīng)驗分享&問題答疑 』
前言最近項目中遇到calc()方法不生效問題，本著究其所以然的想法，徹底查了一下calc的方法及使用，還有為什么項目中使用不生效的問題，最后總結(jié)出此文，解決方法放在結(jié)尾了 cale()是什么calc是英文單詞calculate的縮寫，其實主要用于對項目中一些單位的計算，這里的計算是在calc()函數(shù)里面填充表達式去計算，它會返回具體的值 基本使用平常我們項目中遇到最多的就是一些普通計算了比如： <body> <div class="content"></div> </body> // style .content{ height: calc(100% - 32px); } 這里計算出來的就是頁面減去32像素單位的高度，如果父盒子有高度，這個100%就是繼承父盒子的高度 <div style="height: 200px"> <div class="content"></div> </div> // style .content { background-color: #6b3434; height: calc(100% - 100px); } 除了加減法calc()還支持乘除，乘除法要求必須要有一個參數(shù)是數(shù)字，而且除法的右邊參數(shù)必須是數(shù)字;加、減、乘、除('+'、'-'、'*'、'/'、)，乘除法的運算規(guī)則也是一樣的會先運算乘除再算加減，所以我們不需要刻意的使用括號去包裹，但是如果你是需要先運算加減則要先用括號進行包裹 靈活使用calc()除了這些用法還有一些比較靈活用法： // 計算屬性里面 newWidth:{ // data里設(shè)置一個menuWidth變量來操控width的大小 return width: `calc(100% - ${menuWidth}px)` } 還有比如我這篇旋轉(zhuǎn)方塊里面的每一個點的旋轉(zhuǎn)用到的就是css中的自定義屬性來運算，運用style中的--i屬性來控制變量，從而減少我們大量的css去計算的代碼 js復(fù)制代碼transform: rotate(calc(30deg * var(--i))); 而且calc()還支持混合單位運算，在參數(shù)單位不同時，會做預(yù)處理比如： transform: rotate(calc(30deg * var(--i))); 而且calc()支持很多單位：'px，%，em，rem，vw，vh，cm，pt，pc，vmin，vmax，vh'等 注意calc()表達式的參數(shù)一定要用空格隔開，并且也是支持負數(shù)計算的，而且calc()不支持媒體查詢哦！！ // turn 代表一個圓的圈，1turn就是一圈 // deg 代表角度45deg就是45度 transform: rotate(calc(1turn + 45deg)) 兼容性
—————————————————————————— 該文章在 2023/5/27 17:28:54 編輯過 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
