Open FrankKai opened 4 years ago
<length>,<frequency>,<angle>,<time>,<percentage>,<number>或<integer>
常见calc()demo
width: calc(10px + 100px); width: calc(100% - 30px); width: calc(2em * 5); width: calc(var(--variable-width) + 20px);
/* property: calc(expression) */ width: calc(100% - 80px);
calc()将一个单表达式作为入参,将表达式的计算结果作为值。 表达式可以是任意的通过运算符连接的表达式,使用标准的运算符优先级:
+ - * (至少一个是数字) / (右侧的是数字)
表达式的操作式可以是任意的<length> 如果需要的话,可以在表达式中为值使用任意的单位。 如果需要的话,可以用圆括号去执行计算。
<length>
calc(50% -8px)
calc(50% - 8px)
calc(8px + - 50%)
calc(<calc-sum>) <calc-sum> = <calc - product>[[ '+' | '-' ] <calc-product> ]* <calc-product> = <calc-value>[ '*' <calc-value> | '/' <number>]* <calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
<div class="banner">This is a banner!</div>
// banner左右距离均为40px .banner { position: absolute; left: 40px; width: calc(100% - 80px); border: solid black 1px; box-shadow: 1px 2px; background-color: yellow; padding: 6px; text-align: center; box-sizing: border-box; }
另一种写法:
width: 100%; tranform: translateX(-40px);
帮助确保表单字段适用可用空间,而不超过其容器的边缘,同时保持适当的边距。
<form> <div id="formbox"> <label>Type something:</label> <input type="text"> </div> </form>
input { padding: 2px; display: block; width: calc(100% - 1em); } #formbox { width: calc(100% / 6); border: 1px solid black; padding: 4px; }
.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); width: var(--widthC); }
最终计算结果为
.foo { --widthA: 100px; --widthB: 50px; --widthC: 24.984px; width: 24.984px; }
.modal { z-index: calc(3 / 2); }
Chrome下即使是z-index:calc(4 / 2),都是无效的。
相对长度单位。
h1 { font-size: calc(1.5rem + 3vw); }
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
初识calc()
<length>,<frequency>,<angle>,<time>,<percentage>,<number>或<integer>
常见calc()demo
calc()语法
calc()将一个单表达式作为入参,将表达式的计算结果作为值。 表达式可以是任意的通过运算符连接的表达式,使用标准的运算符优先级:
表达式的操作式可以是任意的
<length>
如果需要的话,可以在表达式中为值使用任意的单位。 如果需要的话,可以用圆括号去执行计算。calc()笔记
calc(50% -8px)
被解析为了一个百分比后面跟了一个负的像素值--这是一个无效的表达式--calc(50% - 8px)
有效。calc(8px + - 50%)
被看做加了一个-50%的值calc()常用语法
通过margin定位一个对象
另一种写法:
自动填充容器
帮助确保表单字段适用可用空间,而不超过其容器的边缘,同时保持适当的边距。
与CSS变量结合进行计算
最终计算结果为
与整数使用需要注意的
Chrome下即使是z-index:calc(4 / 2),都是无效的。
兼容性考虑
相对长度单位。
https://developer.mozilla.org/en-US/docs/Web/CSS/calc