calc()是css3的一个新增的功能,用来指定元素的长度。
它是动态设置元素值,可由加减乘除算法得到最后计算值。
比如说“calc(50% + 5em)”
在使用less解析中calc运算会忽略单位出现:“calc(50% - 5em)” 解析为 “calc(45%)”的情况
修改方法:calc(~"50% - 5em")
运算规则
使用“+”、“-”、“*” 和 “/”四则运算;
可以使用百分比、px、em、rem等单位;
可以混合使用各种单位进行计算;
表达式中有“+”和“-”时,其前后必须要有空格,如"widht: calc(50%+5em)"这种没有空格的写法是错误的;
表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。
运算百分比
除了基本的px,%,em等,还有:
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%)
vh:视窗高度的百分比
vmin:当前 vw 和 vh 中较小的一个值
vmax:当前 vw 和 vh 中较大的一个值
兼容性:
桌面 PC
Chrome:自 26 版起就完美支持
Firefox:自 19 版起就完美支持
Safari:自 6.1 版起就完美支持
Opera:自 15 版起就完美支持
IE:自 IE10 起(包括 Edge)到现在还只是部分支持(不支持 vmax,同时 vm 代替 vmin)
移动设备
Android:自 4.4 版起就完美支持
iOS:自 iOS8 版起就完美支持
附加:(flex垂直居中)
垂直居中三部曲:放父元素
display: flex;
justify-content: center;
align-items: center;