当前位置:首页 > css3动态计算 calc()

css3动态计算 calc()

发布于 2018-07-02 阅读 151 次 CSS CSS3

语法

calc() = calc(四则运算)
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则

注意:运算符前后要留一个空格
例如:height:calc(100% - 2.26rem)

浏览器支持

https://caniuse.com/#search=calc 主流浏览器现在都支持,在移动端使用不用担心。
为了兼容可以加上浏览器厂商前缀:

{
    -wekit-height:calc(100% - 2.26rem);
    -mos-height:calc(100% - 2.26rem);
    -ms-height:calc(100% - 2.26rem);
    height:calc(100% - 2.26rem);
}

比如当我们不能确定具体高度,但是知道他比父级小的具体数值的时候用这个会很方便,当然,有时候我们也可以用定位解决此类问题,但是calc动态计算显然比定位要方便的多,因为定位一般会涉及到上级很多样式问题,有时候可能需要层层定位,还要涉及z-index等层级问题。