点晴MIS问题教程区 加入收藏
问题搜索
 您的位置:点晴OA办公管理信息系统『 经验分享&问题答疑 』浏览当前教程  
  

  网站搜索
  搜索范围: 搜索方式: 关键词(可用空格分开)  

  作者及文章信息: 本文热度:32 % 
freeflydom

积分:3763
等级:网站管理员
文数:102
注册:2017-2-28

 信息       

楼 顶 

 [转帖]手拿把掐拿捏calc()计算函数


前言

最近项目中遇到calc()方法不生效问题,本着究其所以然的想法,彻底查了一下calc的方法及使用,还有为什么项目中使用不生效的问题,最后总结出此文,解决方法放在结尾了

cale()是什么

calc是英文单词calculate的缩写,其实主要用于对项目中一些单位的计算,这里的计算是在calc()函数里面填充表达式去计算,它会返回具体的值

基本使用

平常我们项目中遇到最多的就是一些普通计算了比如:

<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()还支持乘除,乘除法要求必须要有一个参数是数字,而且除法的右边参数必须是数字;加、减、乘、除('+'、'-'、'*'、'/'、),乘除法的运算规则也是一样的会先运算乘除再算加减,所以我们不需要刻意的使用括号去包裹,但是如果你是需要先运算加减则要先用括号进行包裹

灵活使用

calc()除了这些用法还有一些比较灵活用法:

// 计算属性里面

newWidth:{

// data里设置一个menuWidth变量来操控width的大小

    return width: `calc(100% - ${menuWidth}px)`

}



还有比如我这篇旋转方块里面的每一个点的旋转用到的就是css中的自定义属性来运算,运用style中的--i属性来控制变量,从而减少我们大量的css去计算的代码

js复制代码transform: rotate(calc(30deg * var(--i)));


而且calc()还支持混合单位运算,在参数单位不同时,会做预处理比如:


transform: rotate(calc(30deg * var(--i)));



而且calc()支持很多单位:'px,%,em,rem,vw,vh,cm,pt,pc,vmin,vmax,vh'等

注意

calc()表达式的参数一定要用空格隔开,并且也是支持负数计算的,而且calc()不支持媒体查询哦!!

// turn 代表一个圆的圈,1turn就是一圈

// deg 代表角度45deg就是45度

transform: rotate(calc(1turn + 45deg))


兼容性




——————————————————————————
原文链接:https://juejin.cn/post/7218840231856111673



该文章在 2023/5/27 17:28:54 编辑过

  离 线  2023/5/25 18:06:24 
  本文章共有 0 页, 0 张回文,每页有 10 张回文 >> [ ]
页码:  
Copyright 2010-2023 ClickSun All Rights Reserved