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

css3动态计算 calc()

发布于 2018-07-02 阅读 500 次 CSS CSS3
####语法 calc() = calc(四则运算) calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则 注意:运算符前后要留一个空格 例如:height:calc(100% - 2.26rem) ####浏览器支持 https://caniuse.com/#search=calc 主流浏览器现在都支持,在移动端使用不用担心。 为了兼容可以加上浏览器厂商前缀: ```css { -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等层级问题。