calc()使用用法

Posted 2021-01-18 zhaozhou

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;