CSS之calc() - 码农教程

calc() 函数支持任意CSS长度单位的混合计算，遵循标准数学运算优先级规则，可以动态计算长度值。注意，calc()函数内部的运算符两侧各加一个空白符，否则会产生解析错误。

calc()使用的难点在于百分比，理解了百分比定位，使用calc()就非常便捷。譬如以background-position中使用为例。

将背景图片偏移距离底部10px

 <div class='container'>
  </div>

可以采用采用关键字的形式

.container {
      width: 700px;
      height: 400px;
      background-color: #ccc;
      margin: 0 auto;
      background-image: url(./images/1.jpg);
      background-size: contain;
      background-repeat: no-repeat;
      /* 核心代码 */
      background-position:left 0 bottom 10px;
}

也可以采用calc()函数实现：

.container {
      width: 700px;
      height: 400px;
      background-color: #ccc;
      margin: 0 auto;
      background-image: url(./images/1.jpg);
      background-size: contain;
      background-repeat: no-repeat;
        /* 核心代码 */
      background-position: 0 calc(100% - 10px); 
 }

实现效果

原文地址：https://www.cnblogs.com/f6056/p/11388121.html