CSS calc() 函数

2019-08-27 11:00:03 浏览数 (1)

做了几年的移动开发，写UI界面时，总是受移动端影响，喜欢拿屏幕的宽度-固定值，在刚开始写CSS样式时，适配各种屏幕大小总是在JS中来动态改变控件的宽高，用了calc()感觉很轻松！

1.基本语法(calc()) calc()函数可以使用数字属性值来执行加、减、乘、除，四则运算。

代码语言：javascript复制

.demo {
    width: calc(50%  - 40px);//减
     left:calc(20%   10px);//加
     width: calc(3  * 10%);//乘
     left:calc(20%  / 3);//除

2.嵌套使用 calc()函数可以嵌套使用。但是，内部函数将被视为简单的括号表达式。

代码语言：javascript复制

    .demo  {
    width: calc( 100% / calc(100px * 2) );
}

1.需要注意的是，运算符前后都需要保留一个空格； 2.任何长度值都可以使用calc()函数进行计算； 3.calc()函数支持 " ", "-", "*", "/" 运算； 4.calc()函数使用标准的数学运算优先级规则；

0 人点赞