CSS 中calc()神技

众所周知，CSS有一个特殊的calc()函数，用于做基本的数学运算。

demo：

.main-content {
  /* 盒子的高度是100vh-80px */
  height: calc(100vh - 80px);
}

让我们来详细的学习一下这个功能吧:

一, calc() 的作用范围;

calc()函数只能在值中使用。
demo:

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20px);
  height:    calc(100vh - 20px);
  padding:   calc(1vw + 5px);
}

也可以在部分属性的内部作为单独的值使用.
demo:

.el {
  margin: 10px calc(2vw + 5px);
  border-radius: 15px calc(15px / 3) 4px 2px;
  transition: transform calc(1s - 120ms);
}

它甚至可以成为构成属性一部分的另一个功能的一部分！例如，这里的calc() 用于渐变的色标中.

demo:

.el {
  background: #1E88E5 linear-gradient(
  to bottom,
  #1E88E5,
  #1E88E5 calc(50% - 10px),
  #3949AB calc(50% + 10px),
  #3949AB
  );
}

二, calc() 的单位要求;

calc() 可以将不同的单位混合在一起 .

width: calc(100% - 20px);

Tips:在sass中想同时使用calc()和变量以下写法是不可行的; 同时 , calc()不能在媒体查询中使用;

demo:(在sass中)

$padding: 1rem;

.el[data-padding="extra"] {
  padding: $padding + 2rem; // processes to 3rem;
  margin-bottom: $padding * 2; // processes to 2rem; 
}

三, calc() 具有更强的语义;

例如：假设我们需要写定一个父盒子的7分之一的宽度的盒子；

.el {
  /* 更加语义化和容易理解 */
  width: calc(100% / 7);

  /* 这种看起来更冗杂 */
  width: 14.2857142857%;
}

三, calc() 的运算符合和要求;

calc() 中可以使用加减乘除 , 但他们在使用方法上有所不同。
加法(+)和减法(-)要求这两个数都是长度

.el {
  /* 有效👍 */
  margin: calc(10px + 10px);

   /* 无效的👎 */
  margin: calc(10px + 5);
}

除法(/)要求第二个数字是无单位的

.el {
  /* 有效的👍 */
  margin: calc(30px / 3);

  /* 无效的👎 */
  margin: calc(30px / 10px);

  /* 无效的👎  (不能除以0) */
  margin: calc(30px / 0);
}

总结：在编写CSS中calc() 还是非常常用的 ，多多使用就能熟练掌握啦~