calc() 只作用于属性值

不能在媒体查询中使用

/* 无效 */
@media (min-width: calc(40rem + 1px)) {/* Wider than 40rem */
}

与预处理器数学比较

.foot {width: calc(10px + 50px);
}
//组合不同单元; .foot元素总是小于它父元素宽度 50px;
//使用 calc()，计算值是表达式它自己，而非表达式的结果
.foot {width: calc(100% - 50px);
}

支持"+", “-”, “*”, "/"四则运算，又有区别

/*(+、-)要求这两个数都是长度*/
.foot {/* 有效 */margin: calc(100px + 100px);/* 无效 */margin: calc(10px + 5);
}
/*除法(/)要求第二个数字是无单位的*/
.foot {/* 有效的? */margin: calc(30px / 3);/* 无效的? */margin: calc(30px / 10px);
}
//乘法(*)要求其中一个数是无单位的。
.foot {/* 有效的 ? */margin: calc(10px * 3);/* 有效的 ? */margin: calc(3 * 10px);/* 无效的 ? */margin: calc(30px * 3px);
}
/*加法和减法要加前后空格,负数是可以的(例如 calc(5vw - -5px) )，但这是一个例子，说明空格不仅是必需的，而且是有用的*/
.foot {/* 有效的 ? */font-size: calc(3vw + 2px);/* 无效的 ? */font-size: calc(3vw+2px);/* 有效的 ? */font-size: calc(3vw - 2px);/* 无效的 ? */font-size: calc(3vw-2px);
}
//calc() 与开头括号之间没有空格。
.foot {/* 无效的 ? */width: calc (100% / 3);
}

可以嵌套

.foot {width: calc( 100% / calc(100px * 2) );
}

支持大多数浏览器，对于不支持的可以写后补

.foo {width: 90%; /* 浏览器不支持是启用*/width: calc(100% - 50px);
}

less-calc()相关推荐

less里面calc() 语法
转载 Less的好处不用说大家都知道,确实让写CSS的人不在痛苦了,最近我在Less里加入calc时确发现了有点问题,我在Less中这么写: div { width : calc(100% - 30p ...
洛谷 P4463 [集训队互测 2012] calc（拉格朗日插值优化DP）
整理的算法模板合集: ACM模板点我看算法全家桶系列!!! 实际上是一个全新的精炼模板整合计划 Weblink https://www.luogu.com.cn/problem/P4463 Prob ...
CSS的单位及css3的calc()及line-height百分比
说在前面的话阳历2014年已经离我们远去,2015年接踵而来.祝大家新年快乐!在新的一年,我将有新的蜕变!这是2015年的第一篇文章,写一篇关于css的单位的文章吧! 单位介绍说到css的单位,大 ...
纯css实现responsive list -- 魔力calc
2019独角兽企业重金招聘Python工程师标准>>> html: <div class="trunc-list-wrapper" id="myl ...
CSS3运算 calc()函数是怎么实现计算
CSS3运算 calc()函数是怎么实现计算 CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作.例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和. .foo ...
web前端入门学习 css（8）（新增语义化标签、video/audio、新增input类型、新增表单属性、属性选择器、结构伪类选择器、伪元素选择器、css3盒子模型、模糊、calc函数、过渡
https://www.bilibili.com/video/BV1pE411q7FU?p=276 文章目录 html5新特性 html5新增语义化标签 header头部 nav导航 article内 ...
BZOJ 2655 calc (组合计数、DP、多项式、拉格朗日插值)
题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=2655 题解据说有一种神仙容斥做法,但我不会. 以及貌似网上大多数人的dp和我的做法都不 ...
响应式布局html像素值计算,CSS Calc()：制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
【uniapp】CSS3 的 calc() 函数使用表达式动态计算
前言 css3 中增加了 calc() 函数 calc() 函数语法:property: calc(expression) expression 表达式为: "+". " ...
css里calculate,calc() ---一个会计算的css属性
最近这个月一直在赶项目开发,遇到的问题和学到的前端知识没有更新到博客园,现在闲了下来,就整理一下前端知识. 在项目开发中,在样式这方面花费的时间较多,因为针对于数字的变化特别多,本人不爱记数字,在看设 ...

less-calc()

calc() 只作用于属性值

不能在媒体查询中使用

与预处理器数学比较

支持"+", “-”, “*”, "/"四则运算，又有区别

可以嵌套

支持大多数浏览器，对于不支持的可以写后补

less-calc()相关推荐

最新文章

热门文章