calc()是css3的一个新增的功能,用来指定元素的长度。

它是动态设置元素值,可由加减乘除算法得到最后计算值。

比如说“width:calc(50% + 5em)”

在使用less解析中calc运算会忽略单位出现:“width:calc(50% - 5em)” 解析为 “width:calc(45%)”的情况

修改方法:width:calc(~"50% - 5em")

 

运算规则

使用“+”、“-”、“*” 和 “/”四则运算;

可以使用百分比、px、em、rem等单位;

可以混合使用各种单位进行计算;

表达式中有“*”和“/”时,其前后可以没有空格,但建议留有空格。

运算百分比

除了基本的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;

相关文章:

  • 2021-07-29
  • 2021-06-26
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-06-20
  • 2021-10-15
猜你喜欢
  • 2021-04-08
  • 2021-07-05
  • 2021-12-29
  • 2022-12-23
相关资源
相似解决方案