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