做了几年的移动开发,写UI界面时,总是受移动端影响,喜欢拿屏幕的宽度-固定值,在刚开始写CSS样式时,适配各种屏幕大小总是在JS中来动态改变控件的宽高,用了calc()感觉很轻松!
1.基本语法(calc()) calc()函数可以使用数字属性值来执行加、减、乘、除,四则运算。
.demo {
width: calc(50% - 40px);//减
left:calc(20% + 10px);//加
width: calc(3 * 10%);//乘
left:calc(20% / 3);//除
2.嵌套使用 calc()函数可以嵌套使用。但是,内部函数将被视为简单的括号表达式。
.demo {
width: calc( 100% / calc(100px * 2) );
}
1.需要注意的是,运算符前后都需要保留一个空格; 2.任何长度值都可以使用calc()函数进行计算; 3.calc()函数支持 "+", "-", "*", "/" 运算; 4.calc()函数使用标准的数学运算优先级规则;