眾所周知，CSS有一個特殊的calc()函數(shù)，用于做基本的數(shù)學運算。

demo：

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

讓我們來詳細的學習一下這個功能吧:

一, calc() 的作用范圍;

calc()函數(shù)只能在值中使用。
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() 中可以使用加減乘除 , 但他們在使用方法上有所不同。
加法(+)和減法(-)要求這兩個數(shù)都是長度

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

   /* 無效的?? */
  margin: calc(10px + 5);
}

除法(/)要求第二個數(shù)字是無單位的

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

  /* 無效的?? */
  margin: calc(30px / 10px);

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

總結：在編寫CSS中calc() 還是非常常用的 ，多多使用就能熟練掌握啦~