CSS常用的两个函数

1. 计算 calc()

这个感觉是最常用也最实用的的一个方法。
这个函数，可用在如，左右布局，一边宽度固定，另一边撑开左右宽的情景。
calc() 函数用于动态计算长度值。
语法：

calc(数学表达式)， 如：width:calc(100% - 20px);

<style>
    .calc{
      font-size: 10vw;
      overflow: hidden;
    }
    .calc .left{
      float:left;
      width:calc(100% - 20vw);
      background: #d0b6ea;
    }
    .calc .right{
      float:right;
      width:20vw;
      background: #b39dca;
    }
</style>

<div class="calc">
  <div class="left">z</div>
  <div class="right">wk</div>
</div>

2.attr() 获取标签属性

attr(属性名) 获取当前所在选择器的标签的属性值，参数就是属性名，不用加引号。

<style>
   .attr a:after{
     content:'(' attr(href) ')'
   }
</style>

<div class="attr">
 <a href="abc.html">abc</a>
</div>

注：还有很多CSS函数，除了这两个外，大部分是关于颜色渲染方面的函数，业务逻辑中我很少用到，但是这两个CSS函数对我们的帮助很大。