calc() 函数

接受数学表达式并返回数值。

当使用不同类型的单位(例如从百分比中减去 px 值)以计算属性的值时,它尤其有用。

+-/*运算符都可以使用,如果需要,可以添加括号以指定运算顺序。

使用 calc() 计算 div 元素的宽度:

#div1 {
    position: absolute; 
    left: 50px;
    width: calc(100% - 100px); 
    border: 1px solid black; 
    background-color: yellow; 
    padding: 5px; 
    text-align: center; 
}

使用 calc() 确定背景图像的位置:

background-position: calc(50% + 17px) calc(50% + 10px), 50% 50%;

使用 calc() 确定元素的高度:

height: calc(100% - 20px);