calc()无效，知道真相的我眼泪掉下来

最新推荐文章于 2023-03-04 23:38:37 发布
最新推荐文章于 2023-03-04 23:38:37 发布
阅读量2.2k 收藏 3
点赞数 3
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zm151110202/article/details/106407620
版权
  • calc(100%-60px) —— 错误
  • calc(100% - 60px) —— 正确

啊，原来是 - 左右得加上空格。
calc() 能计算的计算表达式里，“ + ” 和 “ - ” 两边要留空格，而 “ * ” 和 “ / ” 没有这个要求。

三游
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html使用calc函数,CSS calc() 函数的介绍与使用方法
weixin_28843191的博客
06-18 5738
在HTML页面的DIV布局中，如果我们把DIV的宽度当做一个计算公式，让浏览器去自动去计算它们的值是不是很有意思呢？那么今天就说一下，CSS中的一个关于计算的函数 calc()calc() 函数介绍calc()：英文单词calculate(计算)的缩写，是 css3 新增加的一个功能。它可以动态的设置元素样式中border、margin、pading以及 width 等属性的值。calc() 函数...
CRC_Calc .rar
12-04
压缩包内包含CRC_Calc和CheckOut两种全面的CRC计算器,涵盖几乎所有类型的CRC算法的计算,方便快捷，
uniapp系列-报错或常见问题处理集锦
热门推荐
tangdou369098655的博客
03-04 2万+
这里可以解决：尺寸自动转换,plus is not defined,打包wgt格式,未添加push模块,忽略版本号提示，禁止手指滑动缩放正常页面，获取app的版本号
Taro开发微信小程序 width使用calc踩的坑
ncgNCGg的博客
12-28 1000
项目场景： 小程序视频列表需要分成两列展示视频，类似下图 问题描述： 两个视频卡片中间的margin是20rpx，每个视频卡片的width为clac(50% - 10rpx),以下样式在小米6真机调试上，会出现只呈现一列的情况。 .video-item { width: calc(50% - 10rpx); } .video-item:nth-child(2n+0){ margin-left: 20rpx; } 原因分析： 因为我将20除以2的结果放到calc当中计算，导致Taro在进行rp
css calc函数
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-02 608
我最近看别人写的样式发现一个函数calc,于是我查了一下用法。 .div { height: calc(100vh - 60px);//用来动态计算div的高度 width: 100%; background: #eaebef; padding: 6px 40px; margin-top: 60px; padding-top: 30px; ...
react中calc()无效
qq_36144469的博客
10-21 833
react中calc()无效
css计算-----calc踩坑指南
qq_45141916的博客
12-28 413
css计算，calc函数书写问题造成的报错。
使用calc显示“invalid property value”无效的属性值
二饭的博客
08-29 1182
函数内calc(100vh - 220px)运算符前后都需要有空格，无空格则是无效的属性值。
记录微信小程序 height: calc(xx – xx)；无效问题
12-30
问题：在微信小程序中使用scroll-view标签时，用height:cale(xx – xx)设置高度无效，在page中设置高度为百分百依旧无效 解决办法：直接在最大的view标签中设置高度为百分百即可 <!-- 视频列表 --> ...
记录微信小程序 height: calc(xx - xx)；无效问题
10-15
主要介绍了微信小程序 - height: calc(xx - xx)；无效 问题，文中给大家扩展介绍下jquery点击添加样式，再次点击移除样式的实例代码,需要的朋友可以参考下
my_calc.rar_calc
09-24
基于Delphi7开发的Windows科学计算器
css3中的calc函数浅析
09-22
calc()对大家来说，或许很陌生，不太会相信calc()是css中的部分。但它却是就是css3的一部分，下面这篇文章主要给大家介绍了关于css3中calc函数的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下
css calc()的使用，以及失效原因
程邓楠的博客
07-29 2524
一、定义与用法 calc() 函数用于动态计算长度值。 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； 任何长度值都可以使用calc()函数进行计算； calc()函数支持 "+", "-", "*", "/" 运算； calc()函数使用标准的数学运算优先级规则； div { width: calc(100% - 450rpx); height: calc(100% - 400rpx); margin: 0 auto; paddin
calc()函数 invalid property value 无效的属性值
weixin_43736435的博客
04-07 1768
在前端网页中有时候使用了 calc()函数，出现了invalid property value；比如 width:calc(100%-12px); **calc()**函数是一个进行四则运算的函数，在其中的运算符的两侧都要保留一个空格才会生效: width:calc(100% - 12px); ...
CSS中的calc函数有时会不生效
Z_Wonderful的博客
01-31 1056
当CSS3中新增了calc函数踩坑。
vue解决less中calc计算不生效的方法
总结前端开发中遇到的问题，分享前端知识
07-24 2240
最近使用less预处理器，发现calc计算不生效的问题 这是我写的代码 这是控制台中的效果 可以看出 less中直接使用calc(96vh - 100px) 按照正常的减法运算了 解决方法： height: calc(~"96vh - 100px"); height:e("calc(100%-60px)") 这样就可以正常计算，控制台中编译效果如下 ...
css中calc不生效（不起作用）
yanhappiness
11-11 9671
calc属性作用不起作用是因为书写格式错误，正确的格式需要在运算符的两边留有空格。2、父元素需要设置高度或者宽度，不能用100%。如果还解决不了，请留言。css中calc属性不起作用。
css单位计算方法,CSS中的calc()计算和vw/vh长度单位
weixin_28691003的博客
08-04 2271
calc()CSS中除了使用具体的值，还可以使用calc()方法来执行一些计算。语法/* property: calc(expression) */width: calc(100% - 60px);calc()函数用一个表达式作为参数，用表达式的结果作为值。表达式的运算对象可以使用任意长度值，并且可以混用(px/em)，也可以通过小括号()来调整计算顺序。表达式中可以使用+|-|*|/操作符来操作...
css 输入框input样式 - hover、focus
zm151110202的博客
11-21 5708
<style> .eInput{ font-size: 12px; color: #333333; } input{ width: 160px; height: 24px; background: #FFFFFF; border: 1px solid #D9D9D9; border-radius: 4px; padding:0 10px; o...
calc
最新发布
05-27
`calc()`是CSS中一种非常有用的计算函数，可以让你在CSS中执行数学运算。通过`calc()`你可以用加、减、乘、除等方式动态计算CSS属性的值，如下所示： ```css width: calc(100% - 20px); font-size: calc(16px + 2vw); padding: calc(2rem / 3) 1rem; ``` 在上述代码中，`calc()`函数可以执行基本的数学运算，比如减法、加法、乘法和除法。在第一行中，`width`属性被设置为`calc(100% - 20px)`，这意味着元素的宽度将是其父元素宽度减去20像素。在第二行中，`font-size`属性设置为`calc(16px + 2vw)`，这意味着字体大小将会基于视口宽度的百分比进行计算。在第三行中，`padding`属性被设置为`calc(2rem / 3) 1rem`，这意味着元素的上下内边距将会是`2rem`除以`3`的结果，左右内边距将会是`1rem`。 `calc()`函数可以非常灵活，可以在不同的CSS属性中使用，你可以使用它来计算长度、百分比、视口单位等等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值