less中calc计算出错

最新推荐文章于 2022-05-13 11:19:09 发布
最新推荐文章于 2022-05-13 11:19:09 发布
阅读量183 收藏 1
点赞数
分类专栏： less 笔记 文章标签： 前端 less
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41904410/article/details/120742492
版权
笔记 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
less
2 篇文章 0 订阅
订阅专栏

问题:

width:calc(100% - 20px)
浏览器解析成width:calc(80%) 了

解决方法:

加~ 符号，计算公式用引号包裹，就ok了
如果有变量的话，需要用@{}包裹

width:calc(~'100% - 20px')

@ww: 20px
width:calc(~'100% - @{ww}')
森林的尽头是阳光
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈css3中calc在less编译时被计算的解决办法
09-24
主要介绍了浅谈css3中calc在less编译时被计算的解决办法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
PIC_CALC计算工具
09-29
多态信息含量（PIC polymorphism information content）:在连锁分析中一个遗传标记多态性可提供的信息量的度量。它是一个亲本为杂合子，另一亲本为不同基因型的概率。现常用来衡量座位多态性高低的程度。
calc在Less中不生效的解决方法
weixin_39118782的博客
09-10 1221
calc在css文件中的正常写法 height: calc(100% - 44px); // 运算符前后都要有空格 然而在Less文件中这样写不生效，编译后的结果为height: 56%; 查其原因，是跟 Less 的语法冲突了，Less 把calc的参数当作运算式执行了。解决方式是使用 Less 的转义字符~，文档：https://github.com/SomMeri/less4j/wiki/Less-Language-Escaping 所以在Less文件中的写法应为： height: calc(~"1
使用less时的calc()函数问题
weixin_30919235的博客
04-18 254
在使用less时写 width：calc(100%-30px); 但在浏览器检查元素的时候总会显示width:70%; 可以在Less中把calc的写法改写成下面这样： width:calc(~"100%-30px")； 这样编译就正常了 就是记录下开发时的一些小坑，如果有同样问题的朋友可以看一下。 转载于:https://www.cnblogs.com/shangqi/p/6...
CSS3中 的 calc() 函数
Jana Jing的分享
12-16 2813
目的是动态改变宽度/高度的变化，适配问题 css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。 calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； 注意 : 运算符"+ - * /"左右两边均要留空格 在less中使用以下样式宽度计算错误: width: calc("100% - 30px"); 计算出来是:width: 70%; 分析 : p...
用css3的calc()函数做自适应
weixin_44076775的博客
07-16 296
pc端做自适应以前知道有百分比，媒体查询，flex布局，今天发现一个好用的自适应布局的方法，css3的calc（）函数，参数是一个表达式，他的作用是自动计算元素数据，pc端可以做宽度自适应，移动端可以做高度自适应，例子如下 width:calc(100% - 20px); height:calc(100% - 20px); 使用“+”、“-”、“” 和 “/”四则运算，可以使用百分比、px、em、rem等单位，而且可以混用多种单位计算 注意的点 calc（）里面的表达式 0 做除数会报错，使用“+”，“-
less中使用calc函数计算错误
zhangxuekang的博客
05-28 1297
在less中使用clac函数为什么计算错误？ calc是css函数，在原生css中效果很好，calc部分解决了css中不能使用算数表达式的短板。css引擎会计算表达式的值，并对不同的单位进行转化，最终计 算出实际的值。less自身就有计算功能，即使不用calc函数，less也会进行计算： div{ left: 5px + 4px; // 9px } 如果计算的单位不一致，less的处理就不像...
Vue项目使用less和css3的calc时计算错误问题解决方案。
SilenceJude的博客
05-11 1708
起因： 项目开发过程中，需要计算一个div版块的高度为100% - 0.48rem，于是很自然的想到了： .content { height: calc(100% - 0.48rem); overflow: scroll; word-wrap: break-word; word-break: normal; } 打开控制台查看代码效果，却发现 高度和我预想的不对。而且99.52%这个数字似乎很眼熟，看了半天才发现99.52 = 100 - 0
CRC Calc_CRC计算_
10-01
在"CRC Calc"的源代码中，我们可以学习如何将这些理论知识转化为实际的计算过程，包括如何表示和操作二进制数据，以及如何实现模2除法和多项式运算。通过理解和分析这些代码，开发者可以更好地理解和应用CRC校验技术...
CSS3 calc()会计算属性详解
09-27
CSS3的`calc()`函数是CSS样式表中的一个强大功能，允许开发者在声明CSS属性时进行动态计算。这个功能在创建响应式布局、调整元素尺寸等方面尤其有用，因为它可以为浏览器提供一种方式来动态地计算元素的大小。下面将...
CSS3中width属性的width: calc(100% - 20px); 使用问题
鸡血博客
12-26 2万+
目的是动态改变宽度/高度的变化，适配问题。 width: calc(100% - 20px); css3 的 calc()函数。 这里的意思是设置宽度比100%的宽度少20px。 calc()函数用于动态计算长度值。 calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； ...
CSS 宽高度百分比数减去固定像素值的办法（例：100%-20px）
楚峡云归的博客
05-27 2万+
做个记录，也能够帮助恰好看到这篇文章的人 height:calc(100% - 20px); 注意：减号两遍一定要打空格，不然会失效 这个地方我就遇到问题了，查了好久的资料才解决。 ...
使用calc()计算宽高错误
令瑞斌
11-19 2302
有时候会遇到calc()计算后的结果转为百分比。如 cacl(100% - 580px) 会变为calc(-480%)。这种错误出现在less中使用。 因为less的计算方式与calc有冲突。 解决方案：calc(~“100% - 580px”) ...
calc在less中计算错误
遇见一个人流泪的博客
05-31 2076
问题： calc(100% - 40px) = calc(60%) 原因： less的计算方式跟calc方法有重叠，两者在一起有冲突 解决： calc(~"100% - 40px") 若要将40px替换成变量，则： calc(~"100% - @{tab-height}")...
width:calc(100% - 20px) 无效
qq_36648885的博客
06-13 3720
** width:calc(100% - 20px) 无效 在最近做项目的时候，在设置div的宽度的时候，发现width:calc(100%-20px)没有效果，这里在console端显示的是这样的 一开始我以为是其他的地方设置的width将他覆盖了，但是我把它改成90%就生效了。说明不是被覆盖。在探索了很久以后，我发现竟然是**减号两边没有加空格！！！**啊~多么不可原谅的错误 总结： 错误写法：calc(100%-20px) 正确写法：calc(100% - 20px) ...
vue calc函数计算出来的值有问题，不生效（less插件）
PrimaryColor
05-13 2125
calc函数计算出来的值有问题，不生效。多半是是跟less插件起冲突了，需要将calc写法转成字符串类型，如：calc(~“100% - 40px”)。 css的calc()函数相关知识： 运算符前后必须空格隔开，否则不生效；常用的长度值几乎都可以使用calc()函数进行计算（包括%，px等），calc()函数支持 “+”, “-”, “*”, “/” 运算； calc()函数在less中不能使用不生效（less的运算方式和calc发送了冲突），比如calc(100% - 250px )会被编译为ca
css3中calc在less编译时被计算的解决办法
热门推荐
每天都记录一点点！
12-26 3万+
对于前端er来说，Less或Sass已经是一项必备的基本技能，有了这个利器，可以省下前端开发者的很多编码时间，让你写CSS如行云流水一般，然后最近我在Less里加入calc时确发现了有点问题，我在Less中这么写： div {width : calc(100% - 30px);}　 　　结果Less把这个当成运算式去执行了，结果给我解析成这样： div {width: calc(70%)
less中解决CSS3的calc计算出错
canglingyue的专栏
04-02 1952
最近在用less的时候发现CSS3的calc函数计算时会出现问题。 问题 .mkt-hover{ width: calc(100% - 16px); } 但是less自己就把它当表达式计算掉了，导致到浏览器那变成了 .mkt-hover{ width: calc(84%); } 解决方法 把calc（）里面的表...
less中calc 使用
weixin_40551876的博客
10-10 6515
发现在less中 calc(100% -4rem) 等带单位混合运算会被less解析忽略单位，全部按照百分比计算，此例中的计算被less编译成calc(96%)。 解决方案 max-height: calc(~"100vh - 69px"); 结合less使用特点 @postHeight: 46px; @postBorderHeight: 1px; ...
css calc计算vh
最新发布
06-07
CSS中的calc()函数可以用于计算视口高度（vh）的值。例如，如果您想要一个元素的高度为视口高度的80％，并且要将其与另一个元素高度的50像素相加，则可以使用以下代码： ``` height: calc(80vh + 50px); ``` 这将...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值