写在前面，这一篇主要介绍css3中几个函数的使用：calc, constant, env, attr函数，这几个函数在一般情况下可能不太能用得到，但是在某些场合还是很重要的，而且它们只要有某些地方写的不对就不会生效，所以接下来跟我一起学些一下这几个函数是如何使用的呗。

calc函数

calc函数允许在声明css属性之前执行一些计算。

语法

cal(表示式)

需要注意以下几点：

1. 表达式只支持+，-，*，/，（）
2. 使用+，-时前后必须要有空格，为了统一性，建议都加上空格
3. *时两边至少有一个是number
4. /时除数必须是number

应用

使用指定外边距定位一个对象

这个例子常用于将某个元素定位在中间位置。适合那种宽度不定，固定外边距的定位布局。

<div class='test'>
  <div class="test__header">我是banner盒子</div>
</div>
.test {
  width: 100%;
  height: 100%;
  position: relative;
  &__header {
    height: 100px;
    position: absolute;
    left: 40px;
    width: calc(100% - 80px);
    background-color: aquamarine;
    text-align: center;
  }
}

效果如下：

自动调整表单域的大小以适应其容器大小

这个例子是固定每列显示多少个元素，然后计算出每一个的宽度。

<div class='test'>
  <div class="test__item">我是第一个盒子</div>
  <div class="test__item">我是第二个盒子</div>
  <div class="test__item">我是第三个盒子</div>
  <div class="test__item">我是第四个盒子</div>
  <div class="test__item">我是第五个盒子</div>
</div>
.test {
  width: 100%;
  height: 100%;
  &__item {
    display: inline-block;
    height: 200px;
    width: calc((100% - 20 * 5px) / 5);
    margin: 0 10px;
    background-color: aquamarine;
    text-align: center;
  }
}

效果如下：

使用css变量嵌套使用calc()

如果计算某个元素的宽度不能使用calc()里面添加一个表达式，而是需要再往里面加一层calc，这种就是calc()的嵌套。 比如A元素的宽度依赖于视窗的大小，B元素的宽度依赖A元素的大小，C元素的宽度依赖于B元素的大小。

<div class='test'>
  <div class="test__A">我是A盒子</div>
  <div class="test__B">我是B盒子</div>
  <div class="test__C">我是C盒子</div>
</div>
.test {
  width: 100%;
  height: 100%;
  &__A {
    height: 100px;
    width: calc(30% - 20px);
    margin: 0 10px;
    background-color: antiquewhite;
  }
  &__B {
    height: 100px;
    --widthA: calc(30% - 20px);
    width: calc(50% - calc(var(--widthA)));
    margin: 0 10px;
    background-color: rgb(184, 213, 200);
  }
  &__C {
    height: 100px;
    --widthA: calc(30% - 20px);
    --widthB: calc(50% - calc(var(--widthA)));
    width: calc(100% - calc(var(--widthB)));
    margin: 0 10px;
    background-color: rgb(203, 191, 235);
  }
}

效果如下：

constant函数和env函数

这两个函数是苹果官方推出来的，用于适配移动端的方案，是ios11新增属性，webkit的css函数，用于设定安全区域与边界的距离。 有以下四个预定义变量 safe-area-inset-left: 安全区域距离左边边界的距离 safe-area-inset-right: 安全区域距离右边边界的距离 safe-area-inset-top: 安全区域距离顶部边界的距离 safe-area-inset-bottom: 安全区域距离底部边界的距离 低版本使用constant函数，后面被废弃了，直接使用env函数。

用法

• 类似于var函数，将浏览器定义的环境变量值，插入css中
• 环境变量由浏览器设置
• 与自定义属性不同，env可以替代属性值或描述符的任何部分，被全局作用在文档中

padding-bottom:env(safe-area-inset-top, 20px)

attr函数

attr函数是获取html某个属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素所依附的元素

用法

attr(attribute-name<type-or-unit>?[, <fallback>]?)

attribute-name: css所引用的HTML属性名称 type-or-unit: 表示所引用的属性值的单位。如果该单位相对于所引用的属性值不合法，那么attr()表达式也不合法 fallback: 如果html元素缺少所规定的属性值或属性值不合法，则使用fallback值。该值必须合法，且不能包含另一个attr()表达式。

应用

<p data-foo="hello">world</p>
[data-foo]::before {
  content: attr(data-foo) " ";
}

效果如下： hello world