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()calc() 只作用于属性值的全部内容，希望文章能够帮你解决less-calc()calc() 只作用于属性值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。