第106天 CSS中的calc()有什么作用?
Activity
EmiyaYang commentedon Jul 30, 2019
calc使得开发者能够使用四则运算表达式来填写CSS属性。
px、%、em等不同单位的数值均可参与计算,浏览器会进行自动转换。
HuoXiaoYe commentedon Jul 31, 2019
坑: 当使用calc的时候,运算符号 左右需要有空格的哦,否则,属性不生效。例如: width: calc(100% - 30px);
haizhilin2013 commentedon Jul 31, 2019
@HuoXiaoYe 很棒,细节关注得很到位哦!
nowherebutup commentedon Jul 31, 2019
用来计算长宽的属性,非常好用,百分比,px,vh/vm都可参与计算,
不过正如上面的大兄弟说的,运算符的左右要有空格,要不然不生效
tiyunchen commentedon Jul 31, 2019
在less使用中某些情况是无效的
height: calc('100% - 36px');
,必须要这样才有效
height: calc(~'100% - 36px');
qq1255198035 commentedon Jul 31, 2019
还需要加单引号吗?
Chaya-cai commentedon Jul 31, 2019
可以很灵活的计算盒子的长宽,支持加减乘除,单位支持百分比、px、em、rem等,加减运算符左右必须有空格,乘除可以没有,但是一般建议保留空格
git710 commentedon Jul 31, 2019
水平垂直居中
EragonBubble commentedon Jul 31, 2019
用于动态计算css长度,在响应式布局中有用到
qp97vi commentedon Aug 8, 2019
动态计算css长度单位,计算的时候需要在运算符合前有左右空格 IE9才开始支持