CSS之calc()

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

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

CSS之calc()

将背景图片偏移距离底部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); 
 }

  

实现效果

CSS之calc()

上一篇:纯CSS制作rate评分


下一篇:Code