css盒模型宽高混合计算calc方法

例如:

  .element{
    width:calc(expression);
}

 

兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好支持,但是在移动端的支持不是很好。

 

其中,expression是一个用来计算长度的表达式,支持“+”,“-”,“*”,“/”运算符。


表达式中有“+”,“-”运算符的,前后必须要有空格,例如 “width:calc(100% - 20px)”这种写法;而对于“*”,“/”并没有这种要求,但为了风格的统一,建议前后也要留空格。

总结 : 

    1.兼容性:在IE9+、FF4.0+、Chrome19+、Safari6+支持较好,移动端支持不理想;

    2.表达式支持加、减、乘、除运算,同时也支持单位的混合使用(%、px、em等);

    3.表达式中有“+”,“-”运算符的,前后必须要有空格。

 

参考原文地址:http://www.cnblogs.com/dan-dan/p/4589616.html

posted @ 2018-06-29 09:17  最好的年纪  阅读(236)  评论(0编辑  收藏  举报