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

css3动态计算 calc()

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

语法

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

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

浏览器支持

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

  1. {
  2. -wekit-height:calc(100% - 2.26rem);
  3. -mos-height:calc(100% - 2.26rem);
  4. -ms-height:calc(100% - 2.26rem);
  5. height:calc(100% - 2.26rem);
  6. }

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