大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

CSS calc计算属性

  • calc()是css3的一个新增的功能,用来指定元素的长度,你可以使用calc()给元素的border、margin、pading、font-size和width等属性动态的设置值。

  • calc()语法

     .element {
       width:calc(expression);
     }
    
  • calc()的运算法则

    • 使用 "+"、"-"、"*" 和 "/" 运算
    • 可以使用百分比、px、em、rem等单位运算
    • 可以混合使用各种单位进行运算
    • 表达式中有 "+" 和 "-" 时,其前后必须有空格。
    • 表达式中有 "*" 和 "/" 时,其前后可以没有空格,但建议保留
  • 浏览器的兼容性

    • 在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持,使用时同样在其前面加上各浏览器厂商的识别符前缀
    .element {
      -moz-calc(expression);
      -webkit-calc(expression);
      -o-calc(expression);
      -ms-calc(expression);
      calc(expression);
    }
  • 应用
    • 众所周知,如果元素的宽度为100%时,其自身不带其它盒模型属性设置还好,如果有别的类似margin、padding或border的属性设置,那将导致盒子被撑破。为了解决撑破容器的问题,以前我们只能计算div.box的宽度,用容器的宽度减去padding和border的值 ,但有时候我们苦于不知道元素的总宽度,比如说是自适应布局,只知道一个百分比值,但其它的值又是*px之类的值,这就比较难解决了。随着css3的出现,其中利用box-sizing来改变元素的盒模型以达到最终想要的效果,但是calc()解决此问题更加方便。
  <style>
    body {
      background: #E8EADD;
      color: #3C323A;
      padding: 20px;
    }

    .wrapper {
      width: 1024px;
      width: -moz-calc(100% - 40px);
      width: -webkit-calc(100% - 40px);
      width: calc(100% - 40px);
      margin: auto;
    }

    #header {
      background: #f60;
      padding: 20px;
      width: cal(100% - 20px * 2);
    }

    #main {
      border: 8px solid #B8C172;
      float: left;
      margin-bottom: 20px;
      margin-right: 20px;
      padding: 20px;
      box-sizing: border-box;
      width: 75%;

      /*
                width: 704px;
                width: -moz-calc(75% - 20px * 2 - 8px * 2);
                width: -webkit-calc(75% - 20px * 2 - 8px * 2);
                width: calc(75% - 20px * 2 - 8px * 2);*/
    }

    #accessory {
      border: 8px solid #B8C172;
      float: right;
      padding: 10px;
      box-sizing: border-box;
      width: calc(25% - 20px);

      /*
                width: 208px;
                width: -moz-calc(25% - 10px * 2 - 8px * 2 - 20px);
                width: -webkit-calc(25% - 10px * 2 - 8px * 2 - 20px);
                width: calc(25% - 10px * 2 - 8px * 2 - 20px);*/
    }

    #footer {
      clear: both;
      background: #000;
      padding: 20px;
      color: #fff;
      width: cal(100% - 20px * 2);
    }
  </style>

  <div class="wrapper">
    <div id="header">
      <h1>CSS3 calc()</h1>
    </div>
    <div id="main">
      <h1>test……</h1>
      <p>test……</p>
    </div>
    <div id="accessory">
      <ul>
        <li>
          <a href="#">test1……</a>
        </li>
        <li>
          <a href="#">test2……</a>
        </li>
        <li>
          <a href="#">test3……</a>
        </li>
      </ul>
    </div>

    <div id="footer">
      footer
    </div>
  </div>