calc()使用用法

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

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

比如说“width: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;

猜你喜欢

转载自www.cnblogs.com/zhaozhou/p/9928197.html