css calc()的使用,以及失效原因

简介: css calc()的使用,以及失效原因

一、定义与用法

calc() 函数用于动态计算长度值。

  • 需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px)
  • 任何长度值都可以使用calc()函数进行计算;
  • calc()函数支持 "+", "-", "*", "/" 运算;
  • calc()函数使用标准的数学运算优先级规则;
div {
  width: calc(100% - 450rpx);
  height: calc(100% - 400rpx);
  margin: 0 auto;
  padding-top: 100rpx;
}

二、失效原因

      1.  运算符前后都需要保留一个空格

       错误写法:      

div{
  width: calc(100%-450rpx);
}

  2.  calc()函数在less中使用是不生效的(less的运算方式和calc发生了冲突)

       例如:calc(100% - 250px)会被编译为calc(-150%)

       正确写法:

div{
  width: calc(~"85% - 200rpx");
}
相关文章
|
2月前
|
安全 前端开发 开发者
CSS3 中 calc()、constant() 和 env() 函数的使用指南
在现代网页设计中,CSS3 的 calc()、constant() 和 env() 函数为开发者提供了强大的工具,帮助实现灵活和响应式的布局。本文将深入探讨这三个函数的定义、用法以及最佳实践,特别是如何利用 calc() 进行动态计算、constant() 的历史背景,以及 env() 在处理设备安全区域中的应用。通过本文,读者将能够更好地理解并运用这些函数,提升网页设计的灵活性与用户体验。
75 0
|
编解码 前端开发 容器
CSS calc() 使用指南
CSS calc() 使用指南
CSS calc() 使用指南
|
前端开发
css calc() 的使用方法,里面包含bug
在做后台管理系统的时候吗,我们通常会发现,左侧的菜单需要出去顶部后自动布满整个屏幕,并且加上背景颜色。但是实现起来有的时候却是挺难受的。所以在这里我们就是用calc() 来使用。calc() 是css 里面的一个计算长度的公式。里面可以进行加减乘除。 但是用的不好的话,会发现没有作用。
css calc() 的使用方法,里面包含bug
|
前端开发 Serverless
使用css的calc() 函数计算宽高
使用css的calc() 函数计算宽高
209 0
使用css的calc() 函数计算宽高
|
前端开发 JavaScript
fixed失效,css堆叠上下文问题
我们直接用具体案例来体会css堆叠上下文,因为官方veurpess-reco1.x版本,当你开启右侧子菜单时,右侧的子菜单fixed就失效了。
188 0
fixed失效,css堆叠上下文问题
|
前端开发 容器
CSS的calc函数不会还有人没有用吧
CSS3新增的函数中有一个非常好用的函数,就是calc()函数,用过的都说好,这篇文章我们来唠一老calc函数。
172 0
|
Web App开发 存储 缓存
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
271 0
探究 CSS 混合模式\滤镜导致 CSS 3D 失效问题
|
JavaScript 前端开发
vue中多行文字,多余的文字显示成...的css失效
vue中多行文字,多余的文字显示成...的css失效
405 0
vue中多行文字,多余的文字显示成...的css失效
|
前端开发
css:flex布局下overflow失效
css:flex布局下overflow失效
349 0