calc()函数

197 阅读1分钟

calc函数

calc()函数用于动态计算长度值,可以用于动态指定元素属性的值,常用于自适应布局

  1. 运算符前后都需要保留一个空格
  1. 支持+ - * / 运算
  2. 可以计算任何长度值

作用:用来确保一个表单域的大小适合当前的可用空间,而不会在保持合适的外边距的同时,因挤压超出其容器的边缘。

语法

calc(数学表达式)

#formbox {
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);
}

在实际使用时,同样需要添加浏览器的前缀

 .elm {
  /*Firefox*/
  -moz-calc(expression);
  /*chrome safari*/
  -webkit-calc(expression);
  /*Standard */
  calc();
 }

\