web前端CSS之“ calc() 函数”

1.定义

calc() 函数用于动态计算长度值。

2.用法

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-“, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

3.作用：

1-自动调整表单域的大小以适应其容器的大小

input {
  padding: 2px;
  display: block;
  width: calc(100% - 1em);//让 form 元素内部的 input 元素保持合适的大小，让它的宽度为其容器的宽度减 1em
}
 
#formbox {
  width: calc(100% / 6);//form 元素自身使用了窗口可用宽度的 1/6
  border: 1px solid black;
  padding: 4px;
}

代码007普通

打赏 收藏 海报 链接