css calc 函数计算元素宽度

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

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

语法：

calc(expression)

参数：

  • expression : 必须，一个数学表达式，结果将采用运算后的返回值。

实例：

<html>
<head>
<meta charset="utf-8"> 
<title>IT懒猫社区</title> 
<style>
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px); //计算动态宽度
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}
</style>
</head>

<body>
<p>创建一个div，div 两边有 50px 的间隙：</p>
<div id="div1">文本内容...</div>
</body>
</html>

calc() 的另外一个用例是用来确保一个表单域的大小适合当前的可用空间，而不会在保持合适的外边距的同时，因挤压超出其容器的边缘。

以下实例中，form 元素自身使用了窗口可用宽度的 1/6，然后，为了让 form 元素内部的 input 元素保持合适的大小，我们再一次使用了 calc()，让它的宽度为其容器的宽度减 1em。
比如：

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