Fe-interview: [css] 第106天 CSS中的calc()有什么作用？

[haizhilin2013]

第106天 CSS中的calc()有什么作用？

[EmiyaYang]

calc使得开发者能够使用四则运算表达式来填写CSS属性。

px、%、em等不同单位的数值均可参与计算，浏览器会进行自动转换。

MDN

[HuoXiaoYe]

坑： 当使用calc的时候，运算符号 左右需要有空格的哦，否则，属性不生效。例如： width: calc(100% - 30px);

[haizhilin2013]

@HuoXiaoYe 很棒，细节关注得很到位哦！

[nowherebutup]

用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算,
不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效

[tiyunchen]

在less使用中某些情况是无效的height: calc('100% - 36px');，
必须要这样才有效 height: calc(~'100% - 36px');

[qq1255198035]

在less使用中某些情况是无效的height: calc('100% - 36px');，
必须要这样才有效 height: calc(~'100% - 36px');

还需要加单引号吗？

[Miiskye]

可以很灵活的计算盒子的长宽，支持加减乘除，单位支持百分比、px、em、rem等，加减运算符左右必须有空格，乘除可以没有，但是一般建议保留空格

[git710]

水平垂直居中

<div class="d0">
    <div class=d1""></div>
</div>

.d0{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid red;
}
.d1{
    position: absolute;
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    left: calc(50% - 50px);
    top: calc(50% - 50px);
}

[EragonBubble]

用于动态计算css长度，在响应式布局中有用到

[qp97vi]

动态计算css长度单位，计算的时候需要在运算符合前有左右空格 IE9才开始支持