zoukankan      html  css  js  c++  java
  • CSS之calc()

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

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

    微盟品专图片

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

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

      

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

    .container {
           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 {
           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); 
     }
    

      

    实现效果

  • 相关阅读:
    决策树
    训练/测试
    机器学习 标准差
    pandas01
    提交参数说明
    pandas_series02
    Yarn 模式
    词云图
    软件需求与分析课堂综合测试
    课堂测试10
  • 原文地址:https://www.cnblogs.com/f6056/p/11388121.html
Copyright © 2011-2022 走看看